@fluentui/react-badge 0.0.0-nightly-20220714-0418.1 → 0.0.0-nightly-20221007-1237.1

package/CHANGELOG.json

@@ -2,13 +2,13 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Thu, 14 Jul 2022 04:33:47 GMT",
-      "tag": "@fluentui/react-badge_v0.0.0-nightly-20220714-0418.1",
-      "version": "0.0.0-nightly-20220714-0418.1",
+      "date": "Fri, 07 Oct 2022 12:44:16 GMT",
+      "tag": "@fluentui/react-badge_v0.0.0-nightly-20221007-1237.1",
+      "version": "0.0.0-nightly-20221007-1237.1",
       "comments": {
         "prerelease": [
           {
-            "author": "email not defined",
+            "author": "fluentui-internal@service.microsoft.com",
             "package": "@fluentui/react-badge",
             "commit": "not available",
             "comment": "Release nightly v9"
@@ -16,20 +16,194 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220714-0418.1",
-            "commit": "93ca0b778c7b206b2f03fe89cbe706738a9f2917"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
+            "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:35 GMT",
+      "tag": "@fluentui/react-badge_v9.0.7",
+      "version": "9.0.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "0885025f43076ebdf3a395cfb6ae65b3304cc5b2",
+            "comment": "fix: CounterBadge now always renders its children if provided"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Sep 2022 20:55:45 GMT",
+      "tag": "@fluentui/react-badge_v9.0.6",
+      "version": "9.0.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:49:54 GMT",
+      "tag": "@fluentui/react-badge_v9.0.5",
+      "version": "9.0.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "1d0a72865a151962362aa3e5054ac9bf8178f09c",
+            "comment": "fix: update color tokens"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "0137f992b99b3b8ec927be8f7aef751d27cd5830",
+            "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:39 GMT",
+      "tag": "@fluentui/react-badge_v9.0.4",
+      "version": "9.0.4",
+      "comments": {
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-badge",
+            "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
+            "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
+          }
+        ],
+        "patch": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 21:21:09 GMT",
+      "tag": "@fluentui/react-badge_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
+            "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.0.2",
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 17:06:14 GMT",
+      "tag": "@fluentui/react-badge_v9.0.2",
+      "version": "9.0.2",
+      "comments": {
+        "none": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "422636fffd66758c1a6dd617063582d902b61927",
+            "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
+          }
+        ],
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "4cb5696dab3111890c3f50ddeb34450d945f0fa3",
+            "comment": "Fix font sizes, padding, and colors to align with visual design."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
+            "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220714-0418.1",
-            "commit": "93ca0b778c7b206b2f03fe89cbe706738a9f2917"
+            "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-badge",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220714-0418.1",
-            "commit": "93ca0b778c7b206b2f03fe89cbe706738a9f2917"
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
+            "commit": "35237381e941c8935b1892c9217096cea3e5601f"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,84 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Thu, 14 Jul 2022 04:33:47 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Oct 2022 12:44:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220714-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20220714-0418.1)
+## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.0.0-nightly-20221007-1237.1)
 
-Thu, 14 Jul 2022 04:33:47 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.1..@fluentui/react-badge_v0.0.0-nightly-20220714-0418.1)
+Fri, 07 Oct 2022 12:44:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.7..@fluentui/react-badge_v0.0.0-nightly-20221007-1237.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220714-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/93ca0b778c7b206b2f03fe89cbe706738a9f2917) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220714-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/93ca0b778c7b206b2f03fe89cbe706738a9f2917) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220714-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/93ca0b778c7b206b2f03fe89cbe706738a9f2917) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
+
+## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.7)
+
+Mon, 03 Oct 2022 22:24:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.6..@fluentui/react-badge_v9.0.7)
+
+### Patches
+
+- fix: CounterBadge now always renders its children if provided ([PR #24916](https://github.com/microsoft/fluentui/pull/24916) by behowell@microsoft.com)
+
+## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.6)
+
+Tue, 20 Sep 2022 20:55:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.5..@fluentui/react-badge_v9.0.6)
+
+### Patches
+
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+
+## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.5)
+
+Thu, 15 Sep 2022 09:49:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.4..@fluentui/react-badge_v9.0.5)
+
+### Patches
+
+- fix: update color tokens ([PR #24027](https://github.com/microsoft/fluentui/pull/24027) by seanmonahan@microsoft.com)
+- fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted ([PR #24611](https://github.com/microsoft/fluentui/pull/24611) by miroslav.stastny@microsoft.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
+## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.4)
+
+Wed, 03 Aug 2022 16:03:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.3..@fluentui/react-badge_v9.0.4)
+
+### Patches
+
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+
+## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.3)
+
+Thu, 14 Jul 2022 21:21:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.2..@fluentui/react-badge_v9.0.3)
+
+### Patches
+
+- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+
+## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.2)
+
+Thu, 14 Jul 2022 17:06:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.1..@fluentui/react-badge_v9.0.2)
+
+### Patches
+
+- Fix font sizes, padding, and colors to align with visual design. ([PR #23379](https://github.com/microsoft/fluentui/pull/23379) by behowell@microsoft.com)
+- chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
+- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
 
 ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.1)
 

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}

package/lib/CounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}
+{"version":3,"file":"CounterBadge.js","sourceRoot":"","sources":["../src/CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}

package/lib/PresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceBadge.js","sourceRoot":"../src/","sources":["PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/PresenceBadge/index';\n"]}
+{"version":3,"file":"PresenceBadge.js","sourceRoot":"","sources":["../src/PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/PresenceBadge/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","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"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n  /**\n   * A Badge can be filled, outline, ghost, inverted\n   * @defaultvalue filled\n   */\n  appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n  /**\n   * A Badge can be one of preset colors\n   * @defaultvalue brand\n   */\n  color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n  /**\n   * A Badge can position the icon before or after the content.\n   * @defaultvalue before\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A Badge can be square, circular or rounded.\n   * @defaultvalue circular\n   */\n  shape?: 'circular' | 'rounded' | 'square';\n\n  /**\n   * A Badge can be on of several preset sizes.\n   * @defaultvalue medium\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n  Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"]}
+{"version":3,"file":"Badge.types.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n  /**\n   * A Badge can be filled, outline, ghost, inverted\n   * @defaultvalue filled\n   */\n  appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n  /**\n   * A Badge can be one of preset colors\n   * @defaultvalue brand\n   */\n  color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n  /**\n   * A Badge can position the icon before or after the content.\n   * @defaultvalue before\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A Badge can be square, circular or rounded.\n   * @defaultvalue circular\n   */\n  shape?: 'circular' | 'rounded' | 'square';\n\n  /**\n   * A Badge can be on of several preset sizes.\n   * @defaultvalue medium\n   */\n  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n  Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAHnD,CADF;AAOD,CAVM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAHnD,CADF;AAOD,CAVM","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"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,IAAI,GAAG,QAFH;IAGJ,YAAY,GAAG,QAHX;IAIJ,UAAU,GAAG,QAJT;IAKJ,KAAK,GAAG;EALJ,IAMF,KANJ;EAQA,MAAM,KAAK,GAAe;IACxB,KADwB;IAExB,IAFwB;IAGxB,YAHwB;IAIxB,UAJwB;IAKxB,KALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CANY;IAUxB,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAVH;IAcxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;EAdE,CAA1B;EAiBA,OAAO,KAAP;AACD,CA3BM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,IAAI,GAAG,QAFH;IAGJ,YAAY,GAAG,QAHX;IAIJ,UAAU,GAAG,QAJT;IAKJ,KAAK,GAAG;EALJ,IAMF,KANJ;EAQA,MAAM,KAAK,GAAe;IACxB,KADwB;IAExB,IAFwB;IAGxB,YAHwB;IAIxB,UAJwB;IAKxB,KALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CANY;IAUxB,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR,CAVH;IAcxB,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;EAdE,CAA1B;EAiBA,OAAO,KAAP;AACD,CA3BM","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"],"sourceRoot":""}

package/lib/components/Badge/useBadgeStyles.js

@@ -173,7 +173,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "sj55zd": "f1l8vj45"
   },
   "ghost-subtle": {
-    "sj55zd": "fqpbvvt"
+    "sj55zd": "fonrgv7"
   },
   "ghost-success": {
     "sj55zd": "f1m7fhi8"
@@ -211,7 +211,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "sj55zd": "f1l8vj45"
   },
   "outline-subtle": {
-    "sj55zd": "fqpbvvt"
+    "sj55zd": "fonrgv7"
   },
   "outline-success": {
     "sj55zd": "f1sms7z7"
@@ -285,7 +285,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "zhjwy3": ["f51if14", "f1aw8cx4"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
 });
 
 const useIconStyles = /*#__PURE__*/__styles({

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, 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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n  },\n\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  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\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    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  // border (all appearances except ghost)\n\n  border: {\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      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      ...shorthands.borderColor('inherit'),\n      ...shorthands.borderRadius('inherit'),\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\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.colorNeutralForegroundInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.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.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    lineHeight: '1',\n    ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n  },\n\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    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootStyles.base,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance !== 'ghost' && rootStyles.border,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    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      iconStyles.base,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } 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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n  },\n\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  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\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    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  // border (all appearances except ghost)\n\n  border: {\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      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      ...shorthands.borderColor('inherit'),\n      ...shorthands.borderRadius('inherit'),\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\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  },\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.colorPaletteGreenForeground2,\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.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.colorPaletteYellowForeground2,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    lineHeight: '1',\n    ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n  },\n\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    fontSize: '12px',\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootStyles.base,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance !== 'ghost' && rootStyles.border,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    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      iconStyles.base,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oBAAT,QAAqC,gBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oBAAT,QAAqC,gBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","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"],"sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n  /**\n   * A Badge can have different appearances that emphasize certain parts of it:\n   *  - filled: The default appearance if one is not specified.\n   *    The badge background is filled with color with a contrasting foreground text to match.\n   *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n   * @default filled\n   */\n  appearance?: 'filled' | 'ghost';\n\n  /**\n   * Semantic colors for a counter badge\n   * @default brand\n   */\n  color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n  /**\n   * Value displayed by the Badge\n   * @default 0\n   */\n  count?: number;\n\n  /**\n   * If a dot should be displayed without the count\n   * @default false\n   */\n  dot?: boolean;\n\n  /**\n   * Max number to be displayed\n   * @default 99\n   */\n  overflowCount?: number;\n\n  /**\n   * A Badge can be circular or rounded\n   * @default circular\n   */\n  shape?: 'circular' | 'rounded';\n\n  /**\n   * If the badge should be shown when count is 0\n   * @default false\n   */\n  showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n  Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"]}
+{"version":3,"file":"CounterBadge.types.js","sourceRoot":"","sources":["../../../src/components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n  /**\n   * A Badge can have different appearances that emphasize certain parts of it:\n   *  - filled: The default appearance if one is not specified.\n   *    The badge background is filled with color with a contrasting foreground text to match.\n   *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n   * @default filled\n   */\n  appearance?: 'filled' | 'ghost';\n\n  /**\n   * Semantic colors for a counter badge\n   * @default brand\n   */\n  color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n  /**\n   * Value displayed by the Badge\n   * @default 0\n   */\n  count?: number;\n\n  /**\n   * If a dot should be displayed without the count\n   * @default false\n   */\n  dot?: boolean;\n\n  /**\n   * Max number to be displayed\n   * @default 99\n   */\n  overflowCount?: number;\n\n  /**\n   * A Badge can be circular or rounded\n   * @default circular\n   */\n  shape?: 'circular' | 'rounded';\n\n  /**\n   * If the badge should be shown when count is 0\n   * @default false\n   */\n  showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n  Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CounterBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CounterBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}

package/lib/components/CounterBadge/useCounterBadge.js

@@ -20,8 +20,8 @@ export const useCounterBadge_unstable = (props, ref) => {
     dot
   };
 
-  if (!state.dot && !state.root.children) {
-    state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;
+  if ((count !== 0 || showZero) && !dot && !state.root.children) {
+    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":"AACA,SAAS,iBAAT,QAAkC,gBAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,UAAU,GAAG,QAFT;IAGJ,QAAQ,GAAG,KAHP;IAIJ,aAAa,GAAG,EAJZ;IAKJ,KAAK,GAAG,CALJ;IAMJ,GAAG,GAAG;EANF,IAOF,KAPJ;EASA,MAAM,KAAK,GAAsB,EAC/B,GAAI,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CADU;IAE/B,KAF+B;IAG/B,UAH+B;IAI/B,QAJ+B;IAK/B,KAL+B;IAM/B;EAN+B,CAAjC;;EASA,IAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;IACtC,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,aAAd,GAA8B,GAAG,aAAa,GAA9C,GAAoD,GAAG,KAAK,CAAC,KAAK,EAAxF;EACD;;EAED,OAAO,KAAP;AACD,CAxBM","sourcesContent":["import * as React from 'react';\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 CounterBadgeState),\n    shape,\n    appearance,\n    showZero,\n    count,\n    dot,\n  };\n\n  if (!state.dot && !state.root.children) {\n    state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":"AAEA,SAAS,iBAAT,QAAkC,gBAAlC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,UAAU,GAAG,QAFT;IAGJ,QAAQ,GAAG,KAHP;IAIJ,aAAa,GAAG,EAJZ;IAKJ,KAAK,GAAG,CALJ;IAMJ,GAAG,GAAG;EANF,IAOF,KAPJ;EASA,MAAM,KAAK,GAAsB,EAC/B,GAAI,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CADU;IAE/B,KAF+B;IAG/B,UAH+B;IAI/B,QAJ+B;IAK/B,KAL+B;IAM/B;EAN+B,CAAjC;;EASA,IAAI,CAAC,KAAK,KAAK,CAAV,IAAe,QAAhB,KAA6B,CAAC,GAA9B,IAAqC,CAAC,KAAK,CAAC,IAAN,CAAW,QAArD,EAA+D;IAC7D,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,GAAG,aAAR,GAAwB,GAAG,aAAa,GAAxC,GAA8C,GAAG,KAAK,EAA5E;EACD;;EAED,OAAO,KAAP;AACD,CAxBM","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"],"sourceRoot":""}

package/lib/components/CounterBadge/useCounterBadgeStyles.js

@@ -28,7 +28,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useCounterBadgeStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
+  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
 
   if (state.icon) {
     state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,oBAAT,QAAqC,aAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,oBAAT,QAAqC,aAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","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"],"sourceRoot":""}