npm - @fluentui/react-badge - Versions diffs - 9.0.24 → 9.0.25 - Mend

@fluentui/react-badge 9.0.24 → 9.0.25

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

Files changed (15) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,28 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Fri, 10 Feb 2023 08:46:47 GMT",
+      "date": "Mon, 13 Feb 2023 23:40:48 GMT",
+      "tag": "@fluentui/react-badge_v9.0.25",
+      "version": "9.0.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "433143da85fcbdda8df0aceaadc5b56f4f8c3470",
+            "comment": "chore: update Badge and PresenceBadge to use makeResetStyles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.5.3",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Feb 2023 08:50:02 GMT",
       "tag": "@fluentui/react-badge_v9.0.24",
       "version": "9.0.24",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-badge
-This log was last generated on Fri, 10 Feb 2023 08:46:47 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Feb 2023 23:40:48 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.25)
+Mon, 13 Feb 2023 23:40:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.24..@fluentui/react-badge_v9.0.25)
+### Patches
+- chore: update Badge and PresenceBadge to use makeResetStyles ([PR #26817](https://github.com/microsoft/fluentui/pull/26817) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
 ## [9.0.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.24)
-Fri, 10 Feb 2023 08:46:47 GMT
+Fri, 10 Feb 2023 08:50:02 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.23..@fluentui/react-badge_v9.0.24)
 ### Patches

package/lib/components/Badge/useBadgeStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const badgeClassNames = {
   root: 'fui-Badge',
@@ -7,18 +7,8 @@ export const badgeClassNames = {
 // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
 // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
 const textPadding = tokens.spacingHorizontalXXS;
+const useRootClassName = /*#__PURE__*/__resetStyles("r1iycov", "r115jdol", [".r1iycov{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".r115jdol{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "ftuwxu6",
-    B7ck84d: "f1ewtqcl",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    qhf8xq: "f10pi13n",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "fl43uef",
-    Bg96gwp: "fwrc4pm"
-  },
   fontSmallToTiny: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
@@ -29,13 +19,23 @@ const useRootStyles = /*#__PURE__*/__styles({
     a9b677: "f16dn6v3",
     Bqenvij: "f3mu39s",
     Be2twd7: "f130uwy9",
-    Bg96gwp: "fod1mrr"
+    Bg96gwp: "fod1mrr",
+    Bf4jedk: "f18p0k4z",
+    z8tnut: "f1q8r6hh",
+    z189sj: ["fio2s09", "fkiw60q"],
+    Byoj8tv: "f9yu9nh",
+    uwmqm3: ["fkiw60q", "fio2s09"]
   },
   "extra-small": {
     a9b677: "fpd43o0",
     Bqenvij: "f30q22z",
     Be2twd7: "f1tccstq",
-    Bg96gwp: "f1y3arg5"
+    Bg96gwp: "f1y3arg5",
+    Bf4jedk: "f18p0k4z",
+    z8tnut: "f1q8r6hh",
+    z189sj: ["fio2s09", "fkiw60q"],
+    Byoj8tv: "f9yu9nh",
+    uwmqm3: ["fkiw60q", "fio2s09"]
   },
   small: {
     Bf4jedk: "fq2vo04",
@@ -45,14 +45,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     Byoj8tv: "f1qch9an",
     uwmqm3: ["f17ae1jz", "fps1v9c"]
   },
-  medium: {
-    Bqenvij: "fjamq6b",
-    Bf4jedk: "f11u7vat",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f17a92cs", "f1pe0i86"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1pe0i86", "f17a92cs"]
-  },
+  medium: {},
   large: {
     Bf4jedk: "f17fgpbq",
     Bqenvij: "frvgh55",
@@ -87,42 +80,11 @@ const useRootStyles = /*#__PURE__*/__styles({
     B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
     Btl43ni: ["f1s4nn1u", "f1rstyi9"]
   },
-  circular: {
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"]
-  },
-  border: {
-    Bsft5z2: "f13zj6fq",
-    E3zdtr: "f1mdlcz9",
-    bn5sak: "frwkxtg",
-    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
-    By385i5: "fo72kxq",
-    B1piin3: ["f15yvnhg", "f1n6gb5g"],
-    Bm2nyyq: "f8rth92",
-    Barhvk9: ["flthirb", "ftkbnf5"],
-    Bw17bha: "f1lh990p",
-    vfts7: ["ftkbnf5", "flthirb"],
-    xrcqlc: "f6czdpx",
-    Ihftqj: ["f13hvwk3", "f1en4csx"],
-    Bcgy8vk: "f1i1u9k0",
-    Bhxzhr1: ["f1en4csx", "f13hvwk3"],
-    B0n5ga8: "fhtl3ys",
-    s924m2: ["f140b627", "f1wihoeh"],
-    B1q35kw: "fplas78",
-    Gp14am: ["f1wihoeh", "f140b627"],
-    B3778ie: ["f1lf1ovl", "f1ydfmkj"],
-    d9w3h3: ["f1ydfmkj", "f1lf1ovl"],
-    Bl18szs: ["feq0ynf", "f1ss7ivt"],
-    B4j8arr: ["f1ss7ivt", "feq0ynf"]
-  },
-  filled: {
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+  circular: {},
+  borderGhost: {
+    ap17g6: "f10ludwy"
   },
+  filled: {},
   "filled-brand": {
     De3pzq: "ffp7eso",
     sj55zd: "f1phragk"
@@ -292,17 +254,10 @@ 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);}", ".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;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".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);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".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);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".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: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", ".f1q8r6hh{padding-top:unset;}", ".fio2s09{padding-right:unset;}", ".fkiw60q{padding-left:unset;}", ".f9yu9nh{padding-bottom:unset;}", ".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;}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".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);}", ".f10ludwy::after{display:none;}", ".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;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".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);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".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);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".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);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".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 useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
 const useIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bg96gwp: "fp6vxd",
-    B6of3ja: "f1hu3pq6",
-    t21cq0: ["fqq8nkd", "f1fdzpd1"],
-    jrapky: "f19f4twv",
-    Frg6f3: ["f1fdzpd1", "fqq8nkd"]
-  },
   beforeText: {
     t21cq0: ["f1t8l4o1", "f11juvx6"]
   },
@@ -324,9 +279,7 @@ const useIconStyles = /*#__PURE__*/__styles({
   small: {
     Be2twd7: "f1ugzwwg"
   },
-  medium: {
-    Be2twd7: "f1ugzwwg"
-  },
+  medium: {},
   large: {
     Be2twd7: "f4ybsrx"
   },
@@ -334,15 +287,17 @@ const useIconStyles = /*#__PURE__*/__styles({
     Be2twd7: "fe5j1ua"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fp6vxd{line-height:1;}", ".f1hu3pq6{margin-top:0;}", ".fqq8nkd{margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f1fdzpd1{margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f19f4twv{margin-bottom:0;}", ".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
+  d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
 });
 /**
  * Applies style classnames to slots
  */
 export const useBadgeStyles_unstable = state => {
+  const rootClassName = useRootClassName();
   const rootStyles = useRootStyles();
   const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
-  state.root.className = mergeClasses(badgeClassNames.root, rootStyles.base, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance !== 'ghost' && rootStyles.border, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  const iconRootClassName = useIconRootClassName();
   const iconStyles = useIconStyles();
   if (state.icon) {
     let iconPositionClass;
@@ -353,7 +308,7 @@ export const useBadgeStyles_unstable = state => {
         iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
       }
     }
-    state.icon.className = mergeClasses(badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
   }
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,kBAAoB,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE;CACP;AAED;AACA;AACA,MAAMC,WAAW,GAAGL,MAAM,CAACM,oBAAoB;AAE/C,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAuOpB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAyCpB;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,UAAU,GAAGJ,aAAa,EAAE;EAElC,MAAMK,WAAW,GAAGF,KAAK,CAACG,IAAI,KAAK,OAAO,IAAIH,KAAK,CAACG,IAAI,KAAK,aAAa,IAAIH,KAAK,CAACG,IAAI,KAAK,MAAM;EAEnGH,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGf,YAAY,CACjCG,eAAe,CAACC,IAAI,EACpBQ,UAAU,CAACI,IAAI,EACfH,WAAW,IAAID,UAAU,CAACK,eAAe,EACzCL,UAAU,CAACD,KAAK,CAACG,IAAI,CAAC,EACtBF,UAAU,CAACD,KAAK,CAACO,KAAK,CAAC,EACvBP,KAAK,CAACO,KAAK,KAAK,SAAS,IAAIL,WAAW,IAAID,UAAU,CAACO,kBAAkB,EACzER,KAAK,CAACS,UAAU,KAAK,OAAO,IAAIR,UAAU,CAACS,MAAM,EACjDT,UAAU,CAACD,KAAK,CAACS,UAAU,CAAC,EAC5BR,UAAU,CAAC,GAAGD,KAAK,CAACS,UAAU,IAAIT,KAAK,CAACW,KAAK,EAAW,CAAC,EACzDX,KAAK,CAACP,IAAI,CAACW,SAAS,CACrB;EAED,MAAMQ,UAAU,GAAGd,aAAa,EAAE;EAClC,IAAIE,KAAK,CAACN,IAAI,EAAE;IACd,IAAImB,iBAAiB;IACrB,IAAIb,KAAK,CAACP,IAAI,CAACqB,QAAQ,EAAE;MACvB,IAAId,KAAK,CAACG,IAAI,KAAK,aAAa,EAAE;QAChCU,iBAAiB,GAAGb,KAAK,CAACe,YAAY,KAAK,OAAO,GAAGH,UAAU,CAACI,WAAW,GAAGJ,UAAU,CAACK,YAAY;OACtG,MAAM;QACLJ,iBAAiB,GAAGb,KAAK,CAACe,YAAY,KAAK,OAAO,GAAGH,UAAU,CAACM,SAAS,GAAGN,UAAU,CAACO,UAAU;;;IAIrGnB,KAAK,CAACN,IAAI,CAACU,SAAS,GAAGf,YAAY,CACjCG,eAAe,CAACE,IAAI,EACpBkB,UAAU,CAACP,IAAI,EACfQ,iBAAiB,EACjBD,UAAU,CAACZ,KAAK,CAACG,IAAI,CAAC,EACtBH,KAAK,CAACN,IAAI,CAACU,SAAS,CACrB;;EAGH,OAAOJ,KAAK;AACd,CAAC","names":["shorthands","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootStyles","useIconStyles","useBadgeStyles_unstable","state","rootStyles","smallToTiny","size","className","base","fontSmallToTiny","shape","roundedSmallToTiny","appearance","border","color","iconStyles","iconPositionClass","children","iconPosition","afterTextXL","beforeTextXL","afterText","beforeText"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"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 ...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 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"]}
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"]}

package/lib/components/PresenceBadge/usePresenceBadgeStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { mergeClasses, __styles, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const presenceBadgeClassNames = {
   root: 'fui-PresenceBadge',
@@ -10,23 +10,8 @@ const getIsBusy = status => {
   }
   return false;
 };
+const useRootClassName = /*#__PURE__*/__resetStyles("r11sysef", null, [".r11sysef{padding:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);}", ".r11sysef span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}"]);
 const useStyles = /*#__PURE__*/__styles({
-  root: {
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"],
-    mc9l5x: "ftuwxu6",
-    B7ck84d: "f1ewtqcl",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bhmb4qv: "fb8jth9",
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"],
-    De3pzq: "fxugw4r"
-  },
   statusBusy: {
     sj55zd: "fvi85wt"
   },
@@ -70,15 +55,16 @@ const useStyles = /*#__PURE__*/__styles({
     p4uzdd: "fhipgdu"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".fb8jth9 span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".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);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
+  d: [".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
 });
 /**
  * Applies style classnames to slots
  */
 export const usePresenceBadgeStyles_unstable = state => {
+  const rootClassName = useRootClassName();
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
-  state.root.className = mergeClasses(presenceBadgeClassNames.root, styles.root, 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.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);
   if (state.icon) {
     state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,~~SAASA~~,YAAY,~~YAAcC,UAAU,~~QAAQ,gBAAgB;~~AACrE~~,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,SAAS,gBAAG;EAAA;IAAA;~~IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;~~EAAA;EAAA;~~IAAA;IAAA;IAAA;~~IAAA;~~EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,~~EAkEhB~~;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,~~GAAGH~~,SAAS,EAAE;EAC1B,~~MAAMI~~,MAAM,~~GAAGN~~,SAAS,~~CAACI~~,KAAK,~~CAACH~~,MAAM,CAAC;~~EACtCG~~,KAAK,~~CAACN~~,IAAI,~~CAACS~~,SAAS,~~GAAGb~~,YAAY,~~CACjCG~~,uBAAuB,CAACC,IAAI,~~EAC5BO~~,~~MAAM~~,~~CAACP~~,~~IAAI,EACXQ,~~MAAM,IAAID,MAAM,CAACG,UAAU,~~EAC3BJ~~,KAAK,~~CAACH~~,MAAM,KAAK,MAAM,~~IAAII~~,MAAM,CAACI,UAAU,~~EAC5CL~~,KAAK,~~CAACH~~,MAAM,KAAK,WAAW,~~IAAII~~,MAAM,CAACK,eAAe,~~EACtDN~~,KAAK,~~CAACH~~,MAAM,KAAK,SAAS,~~IAAII~~,MAAM,CAACM,aAAa,~~EAClDP~~,KAAK,~~CAACH~~,MAAM,KAAK,eAAe,~~IAAII~~,MAAM,CAACO,iBAAiB,~~EAC5DR~~,KAAK,~~CAACS~~,WAAW,IAAIR,MAAM,CAACQ,WAAW,~~EACvCT~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACH~~,MAAM,KAAK,WAAW,~~IAAII~~,MAAM,CAACS,oBAAoB,~~EAChFV~~,KAAK,~~CAACS~~,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,~~EACrDX~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACH~~,MAAM,KAAK,MAAM,~~IAAII~~,MAAM,CAACO,iBAAiB,~~EACxER~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACH~~,MAAM,KAAK,SAAS,~~IAAII~~,MAAM,CAACM,aAAa,~~EACvEP~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACH~~,MAAM,KAAK,eAAe,~~IAAII~~,MAAM,CAACO,iBAAiB,~~EACjFR~~,KAAK,~~CAACY~~,IAAI,KAAK,MAAM,IAAIX,MAAM,CAACY,IAAI,~~EACpCb~~,KAAK,~~CAACY~~,IAAI,KAAK,OAAO,IAAIX,MAAM,CAACa,KAAK,~~EACtCd~~,KAAK,~~CAACY~~,IAAI,KAAK,aAAa,IAAIX,MAAM,CAACc,UAAU,~~EACjDf~~,KAAK,~~CAACN~~,IAAI,~~CAACS~~,SAAS,CACrB;EAED,~~IAAIH~~,KAAK,~~CAACL~~,IAAI,EAAE;~~IACdK~~,KAAK,~~CAACL~~,IAAI,~~CAACQ~~,SAAS,~~GAAGb~~,YAAY,~~CAACG~~,uBAAuB,CAACE,IAAI,~~EAAEK~~,KAAK,~~CAACL~~,IAAI,~~CAACQ~~,SAAS,CAAC;;EAGzF,~~OAAOH~~,KAAK;AACd,CAAC","names":["mergeClasses","~~shorthands","~~tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useStyles","usePresenceBadgeStyles_unstable","state","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 { ~~mergeClasses~~, makeStyles, ~~shorthands~~ } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, 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 ~~useStyles~~ = ~~makeStyles~~({\n ~~root~~: ~~{\n ...shorthands.padding(~~0),\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& span': {\n display: 'flex',\n },\n ~~...shorthands.~~borderRadius(tokens.borderRadiusCircular),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n ~~styles.root~~,\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"]}
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"]}

package/lib-amd/components/Badge/useBadgeStyles.js CHANGED Viewed

@@ -9,39 +9,50 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
     // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
     // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
     var textPadding = react_theme_1.tokens.spacingHorizontalXXS;
+    var useRootClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', boxSizing: 'border-box', alignItems: 'center', justifyContent: 'center', position: 'relative' }, react_theme_1.typographyStyles.caption1Strong), { height: '20px', minWidth: '20px', padding: "0 calc(" + react_theme_1.tokens.spacingHorizontalXS + " + " + textPadding + ")", borderRadius: react_theme_1.tokens.borderRadiusCircular,
+        // Use a transparent stroke (rather than no border) so the border is visible in high contrast
+        borderColor: react_theme_1.tokens.colorTransparentStroke, '::after': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            borderStyle: 'solid',
+            borderColor: 'inherit',
+            borderWidth: react_theme_1.tokens.strokeWidthThin,
+            borderRadius: 'inherit',
+        } }));
     var useRootStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ display: 'inline-flex', boxSizing: 'border-box', alignItems: 'center', justifyContent: 'center', position: 'relative' }, react_theme_1.typographyStyles.caption1Strong),
         fontSmallToTiny: tslib_1.__assign({}, react_theme_1.typographyStyles.caption2Strong),
         // size
-        tiny: {
-            width: '6px',
-            height: '6px',
-            fontSize: '4px',
-            lineHeight: '4px',
-        },
-        'extra-small': {
-            width: '10px',
-            height: '10px',
-            fontSize: '6px',
-            lineHeight: '6px',
-        },
+        tiny: tslib_1.__assign({ width: '6px', height: '6px', fontSize: '4px', lineHeight: '4px', minWidth: 'unset' }, react_1.shorthands.padding('unset')),
+        'extra-small': tslib_1.__assign({ width: '10px', height: '10px', fontSize: '6px', lineHeight: '6px', minWidth: 'unset' }, react_1.shorthands.padding('unset')),
         small: tslib_1.__assign({ minWidth: '16px', height: '16px' }, react_1.shorthands.padding(0, "calc(" + react_theme_1.tokens.spacingHorizontalXXS + " + " + textPadding + ")")),
-        medium: tslib_1.__assign({ height: '20px', minWidth: '20px' }, react_1.shorthands.padding(0, "calc(" + react_theme_1.tokens.spacingHorizontalXS + " + " + textPadding + ")")),
+        medium: {
+        // Set by useRootClassName
+        },
         large: tslib_1.__assign({ minWidth: '24px', height: '24px' }, react_1.shorthands.padding(0, "calc(" + react_theme_1.tokens.spacingHorizontalXS + " + " + textPadding + ")")),
         'extra-large': tslib_1.__assign({ minWidth: '32px', height: '32px' }, react_1.shorthands.padding(0, "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + textPadding + ")")),
         // shape
         square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
         rounded: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
         roundedSmallToTiny: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)),
-        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
-        // border (all appearances except ghost)
-        border: {
-            // The border is applied in an :after pseudo-element because it should not affect layout.
+        circular: {
+        // Set by useRootClassName
+        },
+        // hide the boder when appearance is "ghost"
+        borderGhost: {
+            // The border is applied in an ::after pseudo-element because it should not affect layout.
             // The padding and size of the badge should be the same regardless of whether or not it has a border.
-            '::after': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""', position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }, react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThin)), react_1.shorthands.borderColor('inherit')), react_1.shorthands.borderRadius('inherit')),
+            '::after': {
+                display: 'none',
+            },
         },
         // appearance: filled
-        filled: tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+        filled: {
+        // Set by useRootClassName
+        },
         'filled-brand': {
             backgroundColor: react_theme_1.tokens.colorBrandBackground,
             color: react_theme_1.tokens.colorNeutralForegroundOnBrand,
@@ -133,8 +144,13 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         'tint-success': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorPaletteGreenBackground1, color: react_theme_1.tokens.colorPaletteGreenForeground1 }, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteGreenBorder1)),
         'tint-warning': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorPaletteYellowBackground1, color: react_theme_1.tokens.colorPaletteYellowForeground1 }, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteYellowBorder1)),
     });
+    var useIconRootClassName = react_1.makeResetStyles({
+        display: 'flex',
+        lineHeight: '1',
+        margin: "0 calc(-1 * " + textPadding + ")",
+        fontSize: '12px',
+    });
     var useIconStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ display: 'flex', lineHeight: '1' }, react_1.shorthands.margin(0, "calc(-1 * " + textPadding + ")")),
         beforeText: {
             marginRight: "calc(" + react_theme_1.tokens.spacingHorizontalXXS + " + " + textPadding + ")",
         },
@@ -158,7 +174,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
             fontSize: '12px',
         },
         medium: {
-            fontSize: '12px',
+        // Set by useIconRootClassName
         },
         large: {
             fontSize: '16px',
@@ -171,9 +187,11 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
      * Applies style classnames to slots
      */
     var useBadgeStyles_unstable = function (state) {
+        var rootClassName = useRootClassName();
         var rootStyles = useRootStyles();
         var smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
-        state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance !== 'ghost' && rootStyles.border, rootStyles[state.appearance], rootStyles[state.appearance + "-" + state.color], state.root.className);
+        state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[state.appearance + "-" + state.color], state.root.className);
+        var iconRootClassName = useIconRootClassName();
         var iconStyles = useIconStyles();
         if (state.icon) {
             var iconPositionClass = void 0;
@@ -185,7 +203,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
                     iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
                 }
             }
-            state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
+            state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
         }
         return state;
     };

package/lib-amd/components/Badge/useBadgeStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/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 ...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 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"]}
1	+ {"version":3,"file":"useBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","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"]}

package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+define(["require", "exports", "@griffel/react", "@fluentui/react-theme"], function (require, exports, react_1, react_theme_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = void 0;
@@ -12,10 +12,19 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         }
         return false;
     };
+    var useRootClassName = react_1.makeResetStyles({
+        padding: 0,
+        display: 'inline-flex',
+        boxSizing: 'border-box',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& span': {
+            display: 'flex',
+        },
+        borderRadius: react_theme_1.tokens.borderRadiusCircular,
+        backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+    });
     var useStyles = react_1.makeStyles({
-        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(0)), { display: 'inline-flex', boxSizing: 'border-box', alignItems: 'center', justifyContent: 'center', '& span': {
-                display: 'flex',
-            } }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }),
         statusBusy: {
             color: react_theme_1.tokens.colorPaletteRedBackground3,
         },
@@ -72,9 +81,10 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
      * Applies style classnames to slots
      */
     var usePresenceBadgeStyles_unstable = function (state) {
+        var rootClassName = useRootClassName();
         var styles = useStyles();
         var isBusy = getIsBusy(state.status);
-        state.root.className = react_1.mergeClasses(exports.presenceBadgeClassNames.root, styles.root, 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 = react_1.mergeClasses(exports.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);
         if (state.icon) {
             state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
         }

package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePresenceBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;IAMa,QAAA,uBAAuB,GAA+B;QACjE,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,yBAAyB;KAChC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,MAA2B;QAC5C,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,gBAAgB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE;YACpG,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,IAAM,~~SAAS~~,GAAG,~~kBAAU~~,CAAC;~~QAC3B~~,~~IAAI,0EACC,kBAAU,CAAC,~~OAAO,~~CAAC~~,CAAC,~~CAAC,KACxB,~~OAAO,EAAE,aAAa,~~EACtB,~~SAAS,EAAE,YAAY,~~EACvB,~~UAAU,EAAE,QAAQ,~~EACpB,~~cAAc,EAAE,QAAQ,~~EAExB,~~QAAQ,EAAE;~~gBACR~~,OAAO,EAAE,MAAM;~~aAChB~~,~~KACE,kBAAU,CAAC,~~YAAY,~~CAAC~~,oBAAM,CAAC,oBAAoB,~~CAAC,KACvD,~~eAAe,EAAE,oBAAM,CAAC,uBAAuB,~~GAChD~~;~~QACD~~,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QACD,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,+BAA+B;SAC9C;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,aAAa,EAAE;YACb,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,oBAAM,CAAC,4BAA4B;SAC3C;QACD,WAAW,EAAE;YACX,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,oBAAoB,EAAE;YACpB,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QAED,kEAAkE;QAClE,6EAA6E;QAC7E,EAAE;QACF,IAAI,EAAE;YACJ,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE;gBACP,KAAK,EAAE,gBAAgB;gBACvB,MAAM,EAAE,gBAAgB;aACzB;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,MAAM,EAAE,iBAAiB;aAC1B;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,MAAM,EAAE,iBAAiB;aAC1B;SACF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,IAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACvC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,+BAAuB,CAAC,IAAI,EAC5B,~~MAAM~~,~~CAAC~~,~~IAAI,EACX,~~MAAM,IAAI,MAAM,CAAC,UAAU,EAC3B,KAAK,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,CAAC,UAAU,EAC5C,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,eAAe,EACtD,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,EAClD,KAAK,CAAC,MAAM,KAAK,eAAe,IAAI,MAAM,CAAC,iBAAiB,EAC5D,KAAK,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,EACvC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,oBAAoB,EAChF,KAAK,CAAC,WAAW,IAAI,MAAM,IAAI,MAAM,CAAC,eAAe,EACrD,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,CAAC,iBAAiB,EACxE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,EACvE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,eAAe,IAAI,MAAM,CAAC,iBAAiB,EACjF,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,MAAM,CAAC,IAAI,EACpC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,EACtC,KAAK,CAAC,IAAI,KAAK,aAAa,IAAI,MAAM,CAAC,UAAU,EACjD,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;~~IA5BW~~,QAAA,+BAA+B,~~mCA4B1C~~","sourcesContent":["import { ~~mergeClasses~~, makeStyles, ~~shorthands~~ } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, 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 ~~useStyles~~ = ~~makeStyles~~({\n ~~root~~: ~~{\n ...shorthands.padding(~~0),\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& span': {\n display: 'flex',\n },\n ~~...shorthands.~~borderRadius(tokens.borderRadiusCircular),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n ~~styles.root~~,\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"]}
1	+ {"version":3,"file":"usePresenceBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;IAMa,QAAA,uBAAuB,GAA+B;QACjE,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,yBAAyB;KAChC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,MAA2B;QAC5C,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,gBAAgB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE;YACpG,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,IAAM,gBAAgB,GAAG,uBAAe,CAAC;QACvC,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,YAAY;QACvB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QAExB,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;SAChB;QACD,YAAY,EAAE,oBAAM,CAAC,oBAAoB;QACzC,eAAe,EAAE,oBAAM,CAAC,uBAAuB;KAChD,CAAC,CAAC;IAEH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QACD,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,+BAA+B;SAC9C;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,aAAa,EAAE;YACb,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,oBAAM,CAAC,4BAA4B;SAC3C;QACD,WAAW,EAAE;YACX,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,oBAAoB,EAAE;YACpB,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QAED,kEAAkE;QAClE,6EAA6E;QAC7E,EAAE;QACF,IAAI,EAAE;YACJ,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,KAAK;YACZ,OAAO,EAAE;gBACP,KAAK,EAAE,gBAAgB;gBACvB,MAAM,EAAE,gBAAgB;aACzB;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,MAAM,EAAE,iBAAiB;aAC1B;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE,GAAG;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE;gBACP,KAAK,EAAE,iBAAiB;gBACxB,MAAM,EAAE,iBAAiB;aAC1B;SACF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,IAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QACzC,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,IAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACvC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,+BAAuB,CAAC,IAAI,EAC5B,aAAa,EACb,MAAM,IAAI,MAAM,CAAC,UAAU,EAC3B,KAAK,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,CAAC,UAAU,EAC5C,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,eAAe,EACtD,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,EAClD,KAAK,CAAC,MAAM,KAAK,eAAe,IAAI,MAAM,CAAC,iBAAiB,EAC5D,KAAK,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,EACvC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,oBAAoB,EAChF,KAAK,CAAC,WAAW,IAAI,MAAM,IAAI,MAAM,CAAC,eAAe,EACrD,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,IAAI,MAAM,CAAC,iBAAiB,EACxE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,aAAa,EACvE,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,eAAe,IAAI,MAAM,CAAC,iBAAiB,EACjF,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,MAAM,CAAC,IAAI,EACpC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,EACtC,KAAK,CAAC,IAAI,KAAK,aAAa,IAAI,MAAM,CAAC,UAAU,EACjD,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA7BW,QAAA,+BAA+B,mCA6B1C","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"]}

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

@@ -13,18 +13,8 @@ exports.badgeClassNames = {
 // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
 // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
 const textPadding = react_theme_1.tokens.spacingHorizontalXXS;
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("r1iycov", "r115jdol", [".r1iycov{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".r115jdol{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
 const useRootStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "ftuwxu6",
-    B7ck84d: "f1ewtqcl",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    qhf8xq: "f10pi13n",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "fl43uef",
-    Bg96gwp: "fwrc4pm"
-  },
   fontSmallToTiny: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
@@ -35,13 +25,23 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     a9b677: "f16dn6v3",
     Bqenvij: "f3mu39s",
     Be2twd7: "f130uwy9",
-    Bg96gwp: "fod1mrr"
+    Bg96gwp: "fod1mrr",
+    Bf4jedk: "f18p0k4z",
+    z8tnut: "f1q8r6hh",
+    z189sj: ["fio2s09", "fkiw60q"],
+    Byoj8tv: "f9yu9nh",
+    uwmqm3: ["fkiw60q", "fio2s09"]
   },
   "extra-small": {
     a9b677: "fpd43o0",
     Bqenvij: "f30q22z",
     Be2twd7: "f1tccstq",
-    Bg96gwp: "f1y3arg5"
+    Bg96gwp: "f1y3arg5",
+    Bf4jedk: "f18p0k4z",
+    z8tnut: "f1q8r6hh",
+    z189sj: ["fio2s09", "fkiw60q"],
+    Byoj8tv: "f9yu9nh",
+    uwmqm3: ["fkiw60q", "fio2s09"]
   },
   small: {
     Bf4jedk: "fq2vo04",
@@ -51,14 +51,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Byoj8tv: "f1qch9an",
     uwmqm3: ["f17ae1jz", "fps1v9c"]
   },
-  medium: {
-    Bqenvij: "fjamq6b",
-    Bf4jedk: "f11u7vat",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f17a92cs", "f1pe0i86"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1pe0i86", "f17a92cs"]
-  },
+  medium: {},
   large: {
     Bf4jedk: "f17fgpbq",
     Bqenvij: "frvgh55",
@@ -93,42 +86,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     B7oj6ja: ["f1rstyi9", "f1s4nn1u"],
     Btl43ni: ["f1s4nn1u", "f1rstyi9"]
   },
-  circular: {
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"]
-  },
-  border: {
-    Bsft5z2: "f13zj6fq",
-    E3zdtr: "f1mdlcz9",
-    bn5sak: "frwkxtg",
-    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
-    By385i5: "fo72kxq",
-    B1piin3: ["f15yvnhg", "f1n6gb5g"],
-    Bm2nyyq: "f8rth92",
-    Barhvk9: ["flthirb", "ftkbnf5"],
-    Bw17bha: "f1lh990p",
-    vfts7: ["ftkbnf5", "flthirb"],
-    xrcqlc: "f6czdpx",
-    Ihftqj: ["f13hvwk3", "f1en4csx"],
-    Bcgy8vk: "f1i1u9k0",
-    Bhxzhr1: ["f1en4csx", "f13hvwk3"],
-    B0n5ga8: "fhtl3ys",
-    s924m2: ["f140b627", "f1wihoeh"],
-    B1q35kw: "fplas78",
-    Gp14am: ["f1wihoeh", "f140b627"],
-    B3778ie: ["f1lf1ovl", "f1ydfmkj"],
-    d9w3h3: ["f1ydfmkj", "f1lf1ovl"],
-    Bl18szs: ["feq0ynf", "f1ss7ivt"],
-    B4j8arr: ["f1ss7ivt", "feq0ynf"]
-  },
-  filled: {
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+  circular: {},
+  borderGhost: {
+    ap17g6: "f10ludwy"
   },
+  filled: {},
   "filled-brand": {
     De3pzq: "ffp7eso",
     sj55zd: "f1phragk"
@@ -298,17 +260,10 @@ const useRootStyles = /*#__PURE__*/react_1.__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);}", ".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;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".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);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".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);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".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: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", ".f1q8r6hh{padding-top:unset;}", ".fio2s09{padding-right:unset;}", ".fkiw60q{padding-left:unset;}", ".f9yu9nh{padding-bottom:unset;}", ".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;}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".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);}", ".f10ludwy::after{display:none;}", ".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;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".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);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".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);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".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);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".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 useIconRootClassName = /*#__PURE__*/react_1.__resetStyles("rttl5z0", null, [".rttl5z0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
 const useIconStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bg96gwp: "fp6vxd",
-    B6of3ja: "f1hu3pq6",
-    t21cq0: ["fqq8nkd", "f1fdzpd1"],
-    jrapky: "f19f4twv",
-    Frg6f3: ["f1fdzpd1", "fqq8nkd"]
-  },
   beforeText: {
     t21cq0: ["f1t8l4o1", "f11juvx6"]
   },
@@ -330,9 +285,7 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
   small: {
     Be2twd7: "f1ugzwwg"
   },
-  medium: {
-    Be2twd7: "f1ugzwwg"
-  },
+  medium: {},
   large: {
     Be2twd7: "f4ybsrx"
   },
@@ -340,15 +293,17 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
     Be2twd7: "fe5j1ua"
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fp6vxd{line-height:1;}", ".f1hu3pq6{margin-top:0;}", ".fqq8nkd{margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f1fdzpd1{margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f19f4twv{margin-bottom:0;}", ".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
+  d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
 });
 /**
  * Applies style classnames to slots
  */
 const useBadgeStyles_unstable = state => {
+  const rootClassName = useRootClassName();
   const rootStyles = useRootStyles();
   const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
-  state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance !== 'ghost' && rootStyles.border, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
+  const iconRootClassName = useIconRootClassName();
   const iconStyles = useIconStyles();
   if (state.icon) {
     let iconPositionClass;
@@ -359,7 +314,7 @@ const useBadgeStyles_unstable = state => {
         iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
       }
     }
-    state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
+    state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
   }
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AAIaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE;CACP;AAED;AACA;AACA,MAAMC,WAAW,GAAGC,oBAAM,CAACC,oBAAoB;AAE/C,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAuO9B;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAyC9B;AAEF;;;AAGO,MAAME,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAMC,UAAU,GAAGL,aAAa,EAAE;EAElC,MAAMM,WAAW,GAAGF,KAAK,CAACG,IAAI,KAAK,OAAO,IAAIH,KAAK,CAACG,IAAI,KAAK,aAAa,IAAIH,KAAK,CAACG,IAAI,KAAK,MAAM;EAEnGH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGP,oBAAY,CACjCP,uBAAe,CAACC,IAAI,EACpBU,UAAU,CAACI,IAAI,EACfH,WAAW,IAAID,UAAU,CAACK,eAAe,EACzCL,UAAU,CAACD,KAAK,CAACG,IAAI,CAAC,EACtBF,UAAU,CAACD,KAAK,CAACO,KAAK,CAAC,EACvBP,KAAK,CAACO,KAAK,KAAK,SAAS,IAAIL,WAAW,IAAID,UAAU,CAACO,kBAAkB,EACzER,KAAK,CAACS,UAAU,KAAK,OAAO,IAAIR,UAAU,CAACS,MAAM,EACjDT,UAAU,CAACD,KAAK,CAACS,UAAU,CAAC,EAC5BR,UAAU,CAAC,GAAGD,KAAK,CAACS,UAAU,IAAIT,KAAK,CAACW,KAAK,EAAW,CAAC,EACzDX,KAAK,CAACT,IAAI,CAACa,SAAS,CACrB;EAED,MAAMQ,UAAU,GAAGd,aAAa,EAAE;EAClC,IAAIE,KAAK,CAACR,IAAI,EAAE;IACd,IAAIqB,iBAAiB;IACrB,IAAIb,KAAK,CAACT,IAAI,CAACuB,QAAQ,EAAE;MACvB,IAAId,KAAK,CAACG,IAAI,KAAK,aAAa,EAAE;QAChCU,iBAAiB,GAAGb,KAAK,CAACe,YAAY,KAAK,OAAO,GAAGH,UAAU,CAACI,WAAW,GAAGJ,UAAU,CAACK,YAAY;OACtG,MAAM;QACLJ,iBAAiB,GAAGb,KAAK,CAACe,YAAY,KAAK,OAAO,GAAGH,UAAU,CAACM,SAAS,GAAGN,UAAU,CAACO,UAAU;;;IAIrGnB,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGP,oBAAY,CACjCP,uBAAe,CAACE,IAAI,EACpBoB,UAAU,CAACP,IAAI,EACfQ,iBAAiB,EACjBD,UAAU,CAACZ,KAAK,CAACG,IAAI,CAAC,EACtBH,KAAK,CAACR,IAAI,CAACY,SAAS,CACrB;;EAGH,OAAOJ,KAAK;AACd,CAAC;AAvCYV,+BAAuB","names":["exports","root","icon","textPadding","react_theme_1","spacingHorizontalXXS","useRootStyles","react_1","useIconStyles","useBadgeStyles_unstable","state","rootStyles","smallToTiny","size","className","base","fontSmallToTiny","shape","roundedSmallToTiny","appearance","border","color","iconStyles","iconPositionClass","children","iconPosition","afterTextXL","beforeTextXL","afterText","beforeText"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"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 ...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 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"]}
1	+ {"version":3,"mappings":"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","names":["exports","root","icon","textPadding","react_theme_1","spacingHorizontalXXS","useRootClassName","react_1","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"]}

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

@@ -16,23 +16,8 @@ const getIsBusy = status => {
   }
   return false;
 };
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("r11sysef", null, [".r11sysef{padding:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);}", ".r11sysef span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}"]);
 const useStyles = /*#__PURE__*/react_1.__styles({
-  root: {
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"],
-    mc9l5x: "ftuwxu6",
-    B7ck84d: "f1ewtqcl",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bhmb4qv: "fb8jth9",
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"],
-    De3pzq: "fxugw4r"
-  },
   statusBusy: {
     sj55zd: "fvi85wt"
   },
@@ -76,15 +61,16 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     p4uzdd: "fhipgdu"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".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;}", ".fb8jth9 span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".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);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
+  d: [".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
 });
 /**
  * Applies style classnames to slots
  */
 const usePresenceBadgeStyles_unstable = state => {
+  const rootClassName = useRootClassName();
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
-  state.root.className = react_1.mergeClasses(exports.presenceBadgeClassNames.root, styles.root, 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 = react_1.mergeClasses(exports.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);
   if (state.icon) {
     state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AACA;AAKaA,+BAAuB,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,~~SAAS~~,gBAAGC,gBAAU;EAAA;IAAA;~~IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;~~EAAA;EAAA;~~IAAA;IAAA;IAAA;~~IAAA;~~EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,~~EAkE1B~~;AAEF;;;AAGO,~~MAAMC~~,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAMK,MAAM,~~GAAGP~~,SAAS,~~CAACK~~,KAAK,~~CAACJ~~,MAAM,CAAC;~~EACtCI~~,KAAK,~~CAACP~~,IAAI,~~CAACU~~,SAAS,~~GAAGL~~,oBAAY,CACjCN,+BAAuB,CAACC,IAAI,~~EAC5BQ~~,~~MAAM~~,~~CAACR~~,~~IAAI,EACXS,~~MAAM,IAAID,MAAM,CAACG,UAAU,~~EAC3BJ~~,KAAK,~~CAACJ~~,MAAM,KAAK,MAAM,~~IAAIK~~,MAAM,CAACI,UAAU,~~EAC5CL~~,KAAK,~~CAACJ~~,MAAM,KAAK,WAAW,~~IAAIK~~,MAAM,CAACK,eAAe,~~EACtDN~~,KAAK,~~CAACJ~~,MAAM,KAAK,SAAS,~~IAAIK~~,MAAM,CAACM,aAAa,~~EAClDP~~,KAAK,~~CAACJ~~,MAAM,KAAK,eAAe,~~IAAIK~~,MAAM,CAACO,iBAAiB,~~EAC5DR~~,KAAK,~~CAACS~~,WAAW,IAAIR,MAAM,CAACQ,WAAW,~~EACvCT~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACJ~~,MAAM,KAAK,WAAW,~~IAAIK~~,MAAM,CAACS,oBAAoB,~~EAChFV~~,KAAK,~~CAACS~~,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,~~EACrDX~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACJ~~,MAAM,KAAK,MAAM,~~IAAIK~~,MAAM,CAACO,iBAAiB,~~EACxER~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACJ~~,MAAM,KAAK,SAAS,~~IAAIK~~,MAAM,CAACM,aAAa,~~EACvEP~~,KAAK,~~CAACS~~,WAAW,~~IAAIT~~,KAAK,~~CAACJ~~,MAAM,KAAK,eAAe,~~IAAIK~~,MAAM,CAACO,iBAAiB,~~EACjFR~~,KAAK,~~CAACY~~,IAAI,KAAK,MAAM,IAAIX,MAAM,CAACY,IAAI,~~EACpCb~~,KAAK,~~CAACY~~,IAAI,KAAK,OAAO,IAAIX,MAAM,CAACa,KAAK,~~EACtCd~~,KAAK,~~CAACY~~,IAAI,KAAK,aAAa,IAAIX,MAAM,CAACc,UAAU,~~EACjDf~~,KAAK,~~CAACP~~,IAAI,~~CAACU~~,SAAS,CACrB;EAED,~~IAAIH~~,KAAK,~~CAACN~~,IAAI,EAAE;~~IACdM~~,KAAK,~~CAACN~~,IAAI,~~CAACS~~,SAAS,~~GAAGL~~,oBAAY,CAACN,+BAAuB,CAACE,IAAI,~~EAAEM~~,KAAK,~~CAACN~~,IAAI,~~CAACS~~,SAAS,CAAC;;EAGzF,~~OAAOH~~,KAAK;AACd,CAAC;~~AA5BYR~~,uCAA+B","names":["exports","root","icon","getIsBusy","status","~~useStyles~~","react_1","usePresenceBadgeStyles_unstable","state","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 { ~~mergeClasses~~, makeStyles, ~~shorthands~~ } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, 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 ~~useStyles~~ = ~~makeStyles~~({\n ~~root~~: ~~{\n ...shorthands.padding(~~0),\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& span': {\n display: 'flex',\n },\n ~~...shorthands.~~borderRadius(tokens.borderRadiusCircular),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/*\n Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n ~~styles.root~~,\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"]}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAKaA,+BAAuB,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,gBAAGC,qBAAe,iiBAYtC;AAEF,MAAMC,SAAS,gBAAGD,gBAAU;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,EAqD1B;AAEF;;;AAGO,MAAME,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,aAAa,GAAGL,gBAAgB,EAAE;EACxC,MAAMM,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAMK,MAAM,GAAGT,SAAS,CAACM,KAAK,CAACL,MAAM,CAAC;EACtCK,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGP,oBAAY,CACjCN,+BAAuB,CAACC,IAAI,EAC5BS,aAAa,EACbE,MAAM,IAAID,MAAM,CAACG,UAAU,EAC3BL,KAAK,CAACL,MAAM,KAAK,MAAM,IAAIO,MAAM,CAACI,UAAU,EAC5CN,KAAK,CAACL,MAAM,KAAK,WAAW,IAAIO,MAAM,CAACK,eAAe,EACtDP,KAAK,CAACL,MAAM,KAAK,SAAS,IAAIO,MAAM,CAACM,aAAa,EAClDR,KAAK,CAACL,MAAM,KAAK,eAAe,IAAIO,MAAM,CAACO,iBAAiB,EAC5DT,KAAK,CAACU,WAAW,IAAIR,MAAM,CAACQ,WAAW,EACvCV,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACL,MAAM,KAAK,WAAW,IAAIO,MAAM,CAACS,oBAAoB,EAChFX,KAAK,CAACU,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,EACrDZ,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACL,MAAM,KAAK,MAAM,IAAIO,MAAM,CAACO,iBAAiB,EACxET,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACL,MAAM,KAAK,SAAS,IAAIO,MAAM,CAACM,aAAa,EACvER,KAAK,CAACU,WAAW,IAAIV,KAAK,CAACL,MAAM,KAAK,eAAe,IAAIO,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,CAACR,IAAI,CAACY,SAAS,CACrB;EAED,IAAIJ,KAAK,CAACP,IAAI,EAAE;IACdO,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGP,oBAAY,CAACN,+BAAuB,CAACE,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACW,SAAS,CAAC;;EAGzF,OAAOJ,KAAK;AACd,CAAC;AA7BYT,uCAA+B","names":["exports","root","icon","getIsBusy","status","useRootClassName","react_1","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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.0.24",
+  "version": "9.0.25",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,7 +35,7 @@
     "@fluentui/react-icons": "^2.0.175",
     "@griffel/react": "^1.5.2",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.2",
+    "@fluentui/react-utilities": "^9.5.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {