@fluentui/react-badge 9.0.0 → 9.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/CHANGELOG.json +84 -1
  2. package/CHANGELOG.md +34 -2
  3. package/README.md +2 -2
  4. package/lib/components/Badge/useBadgeStyles.js +119 -93
  5. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  6. package/lib-commonjs/components/Badge/useBadgeStyles.js +118 -92
  7. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  8. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,7 +2,90 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 28 Jun 2022 15:09:31 GMT",
5
+ "date": "Thu, 14 Jul 2022 21:18:44 GMT",
6
+ "tag": "@fluentui/react-badge_v9.0.3",
7
+ "version": "9.0.3",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-badge",
13
+ "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
14
+ "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-badge",
19
+ "comment": "Bump @fluentui/react-utilities to v9.0.2",
20
+ "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Thu, 14 Jul 2022 17:06:14 GMT",
27
+ "tag": "@fluentui/react-badge_v9.0.2",
28
+ "version": "9.0.2",
29
+ "comments": {
30
+ "none": [
31
+ {
32
+ "author": "Humberto.Morimoto@microsoft.com",
33
+ "package": "@fluentui/react-badge",
34
+ "commit": "422636fffd66758c1a6dd617063582d902b61927",
35
+ "comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
36
+ }
37
+ ],
38
+ "patch": [
39
+ {
40
+ "author": "behowell@microsoft.com",
41
+ "package": "@fluentui/react-badge",
42
+ "commit": "4cb5696dab3111890c3f50ddeb34450d945f0fa3",
43
+ "comment": "Fix font sizes, padding, and colors to align with visual design."
44
+ },
45
+ {
46
+ "author": "ololubek@microsoft.com",
47
+ "package": "@fluentui/react-badge",
48
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
49
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
50
+ },
51
+ {
52
+ "author": "beachball",
53
+ "package": "@fluentui/react-badge",
54
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
55
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
56
+ },
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-badge",
60
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
61
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
62
+ }
63
+ ]
64
+ }
65
+ },
66
+ {
67
+ "date": "Tue, 28 Jun 2022 17:39:47 GMT",
68
+ "tag": "@fluentui/react-badge_v9.0.1",
69
+ "version": "9.0.1",
70
+ "comments": {
71
+ "patch": [
72
+ {
73
+ "author": "lingfangao@hotmail.com",
74
+ "package": "@fluentui/react-badge",
75
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
76
+ "comment": "fix: Use caret dependency range for Griffel"
77
+ },
78
+ {
79
+ "author": "beachball",
80
+ "package": "@fluentui/react-badge",
81
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
82
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
83
+ }
84
+ ]
85
+ }
86
+ },
87
+ {
88
+ "date": "Tue, 28 Jun 2022 15:14:19 GMT",
6
89
  "tag": "@fluentui/react-badge_v9.0.0",
7
90
  "version": "9.0.0",
8
91
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,44 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Tue, 28 Jun 2022 15:09:31 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 14 Jul 2022 21:18:44 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.3)
8
+
9
+ Thu, 14 Jul 2022 21:18:44 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.2..@fluentui/react-badge_v9.0.3)
11
+
12
+ ### Patches
13
+
14
+ - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
16
+
17
+ ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.2)
18
+
19
+ Thu, 14 Jul 2022 17:06:14 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.1..@fluentui/react-badge_v9.0.2)
21
+
22
+ ### Patches
23
+
24
+ - Fix font sizes, padding, and colors to align with visual design. ([PR #23379](https://github.com/microsoft/fluentui/pull/23379) by behowell@microsoft.com)
25
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
26
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
27
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
28
+
29
+ ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.1)
30
+
31
+ Tue, 28 Jun 2022 17:39:47 GMT
32
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0..@fluentui/react-badge_v9.0.1)
33
+
34
+ ### Patches
35
+
36
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
37
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
38
+
7
39
  ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0)
8
40
 
9
- Tue, 28 Jun 2022 15:09:31 GMT
41
+ Tue, 28 Jun 2022 15:14:19 GMT
10
42
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-rc.13..@fluentui/react-badge_v9.0.0)
11
43
 
12
44
  ### Patches
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @fluentui/react-badge
2
2
 
3
- **Badge components for [Fluent UI](https://aka.ms/fluentui-storybook)**
3
+ **Badge components for [Fluent UI](https://react.fluentui.dev/)**
4
4
 
5
5
  A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
6
6
 
@@ -27,7 +27,7 @@ import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';
27
27
  <PresenceBadge outOfOffice status="do-not-disturb" />
28
28
  ```
29
29
 
30
- See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
30
+ See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
31
31
 
32
32
  Alternatively, run Storybook locally with:
33
33
 
package/lib/components/Badge/useBadgeStyles.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { shorthands, mergeClasses, __styles } from '@griffel/react';
2
- import { tokens } from '@fluentui/react-theme';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  export const badgeClassNames = {
4
4
  root: 'fui-Badge',
5
5
  icon: 'fui-Badge__icon'
6
- };
6
+ }; // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
7
+ // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
8
+
9
+ const textPadding = tokens.spacingHorizontalXXS;
7
10
 
8
11
  const useRootStyles = /*#__PURE__*/__styles({
9
12
  "base": {
@@ -11,77 +14,68 @@ const useRootStyles = /*#__PURE__*/__styles({
11
14
  "B7ck84d": "f1ewtqcl",
12
15
  "Bt984gj": "f122n59",
13
16
  "Brf1p80": "f4d9j23",
17
+ "qhf8xq": "f10pi13n",
18
+ "Bahqtrf": "fk6fouc",
19
+ "Be2twd7": "fy9rknc",
14
20
  "Bhrd7zp": "fl43uef",
15
- "B4j52fo": "f192inf7",
16
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
17
- "Bn0qgzm": "f1vxd6vx",
18
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
19
- "icvyot": "fzkkow9",
20
- "vrafjx": ["fcdblym", "fjik90z"],
21
- "oivjwe": "fg706s2",
22
- "wvpqe5": ["fjik90z", "fcdblym"],
21
+ "Bg96gwp": "fwrc4pm"
22
+ },
23
+ "fontSmallToTiny": {
23
24
  "Bahqtrf": "fk6fouc",
24
- "qhf8xq": "f10pi13n"
25
+ "Be2twd7": "f13mqy1h",
26
+ "Bhrd7zp": "fl43uef",
27
+ "Bg96gwp": "fcpl73t"
25
28
  },
26
29
  "tiny": {
27
30
  "a9b677": "f16dn6v3",
28
31
  "Bqenvij": "f3mu39s",
29
- "Be2twd7": "f130uwy9"
32
+ "Be2twd7": "f130uwy9",
33
+ "Bg96gwp": "fod1mrr"
30
34
  },
31
35
  "extra-small": {
32
36
  "a9b677": "fpd43o0",
33
37
  "Bqenvij": "f30q22z",
34
- "Be2twd7": "f1tccstq"
38
+ "Be2twd7": "f1tccstq",
39
+ "Bg96gwp": "f1y3arg5"
35
40
  },
36
41
  "small": {
37
42
  "Bf4jedk": "fq2vo04",
38
43
  "Bqenvij": "fd461yt",
39
- "z8tnut": "fq1loh5",
40
- "z189sj": ["f12huiiw", "f161knb0"],
41
- "Byoj8tv": "futqtb8",
42
- "uwmqm3": ["f161knb0", "f12huiiw"],
43
- "i8kkvl": "f1q8lukm",
44
- "Belr9w4": "f1ma2n7n",
45
- "Be2twd7": "f1n0apg3"
44
+ "z8tnut": "f1g0x7ka",
45
+ "z189sj": ["fps1v9c", "f17ae1jz"],
46
+ "Byoj8tv": "f1qch9an",
47
+ "uwmqm3": ["f17ae1jz", "fps1v9c"]
46
48
  },
47
49
  "medium": {
48
50
  "Bqenvij": "fjamq6b",
49
51
  "Bf4jedk": "f11u7vat",
50
- "i8kkvl": "f1q8lukm",
51
- "Belr9w4": "f1ma2n7n",
52
- "z8tnut": "f10ra9hq",
53
- "z189sj": ["f8wuabp", "fycuoez"],
54
- "Byoj8tv": "f1y2xyjm",
55
- "uwmqm3": ["fycuoez", "f8wuabp"],
56
- "Be2twd7": "fnmn6fi"
52
+ "z8tnut": "f1g0x7ka",
53
+ "z189sj": ["f17a92cs", "f1pe0i86"],
54
+ "Byoj8tv": "f1qch9an",
55
+ "uwmqm3": ["f1pe0i86", "f17a92cs"]
57
56
  },
58
57
  "large": {
59
58
  "Bf4jedk": "f17fgpbq",
60
59
  "Bqenvij": "frvgh55",
61
- "z8tnut": "f10ra9hq",
62
- "z189sj": ["f8wuabp", "fycuoez"],
63
- "Byoj8tv": "f1y2xyjm",
64
- "uwmqm3": ["fycuoez", "f8wuabp"],
65
- "Be2twd7": "f1ugzwwg",
66
- "i8kkvl": "f1q8lukm",
67
- "Belr9w4": "f1ma2n7n"
60
+ "z8tnut": "f1g0x7ka",
61
+ "z189sj": ["f17a92cs", "f1pe0i86"],
62
+ "Byoj8tv": "f1qch9an",
63
+ "uwmqm3": ["f1pe0i86", "f17a92cs"]
68
64
  },
69
65
  "extra-large": {
70
66
  "Bf4jedk": "fwbmr0d",
71
67
  "Bqenvij": "f1d2rq10",
72
- "z8tnut": "f1xp5gbu",
73
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
74
- "Byoj8tv": "f1d7kygh",
75
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
76
- "i8kkvl": "fgfbwa2",
77
- "Belr9w4": "f1y3hx6l",
78
- "Be2twd7": "f1ugzwwg",
79
- "B4j52fo": "f18zi460",
80
- "Bekrc4i": ["f1wpluaz", "fsfsuhs"],
81
- "Bn0qgzm": "fmklw6v",
82
- "ibv6hh": ["fsfsuhs", "f1wpluaz"]
83
- },
84
- "square": {},
68
+ "z8tnut": "f1g0x7ka",
69
+ "z189sj": ["fqznh8f", "f1xile11"],
70
+ "Byoj8tv": "f1qch9an",
71
+ "uwmqm3": ["f1xile11", "fqznh8f"]
72
+ },
73
+ "square": {
74
+ "Bbmb7ep": ["fzi6hpg", "fyowgf4"],
75
+ "Beyfa6y": ["fyowgf4", "fzi6hpg"],
76
+ "B7oj6ja": ["f3fg2lr", "f13av6d4"],
77
+ "Btl43ni": ["f13av6d4", "f3fg2lr"]
78
+ },
85
79
  "rounded": {
86
80
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
87
81
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -95,10 +89,34 @@ const useRootStyles = /*#__PURE__*/__styles({
95
89
  "Btl43ni": ["f1s4nn1u", "f1rstyi9"]
96
90
  },
97
91
  "circular": {
98
- "Bbmb7ep": ["fxyqdnz", "fib3qew"],
99
- "Beyfa6y": ["fib3qew", "fxyqdnz"],
100
- "B7oj6ja": ["f14p2bvz", "fdqj3q4"],
101
- "Btl43ni": ["fdqj3q4", "f14p2bvz"]
92
+ "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
93
+ "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
94
+ "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
95
+ "Btl43ni": ["f1s8kh49", "f1djnp8u"]
96
+ },
97
+ "border": {
98
+ "Bsft5z2": "f13zj6fq",
99
+ "E3zdtr": "f1mdlcz9",
100
+ "bn5sak": "frwkxtg",
101
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
102
+ "By385i5": "fo72kxq",
103
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
104
+ "Bm2nyyq": "f8rth92",
105
+ "Barhvk9": ["flthirb", "ftkbnf5"],
106
+ "Bw17bha": "f1lh990p",
107
+ "vfts7": ["ftkbnf5", "flthirb"],
108
+ "xrcqlc": "f6czdpx",
109
+ "Ihftqj": ["f13hvwk3", "f1en4csx"],
110
+ "Bcgy8vk": "f1i1u9k0",
111
+ "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
112
+ "B0n5ga8": "fhtl3ys",
113
+ "s924m2": ["f140b627", "f1wihoeh"],
114
+ "B1q35kw": "fplas78",
115
+ "Gp14am": ["f1wihoeh", "f140b627"],
116
+ "B3778ie": ["f1lf1ovl", "f1ydfmkj"],
117
+ "d9w3h3": ["f1ydfmkj", "f1lf1ovl"],
118
+ "Bl18szs": ["feq0ynf", "f1ss7ivt"],
119
+ "B4j8arr": ["f1ss7ivt", "feq0ynf"]
102
120
  },
103
121
  "filled": {
104
122
  "g2u3we": "fghlq4f",
@@ -108,19 +126,11 @@ const useRootStyles = /*#__PURE__*/__styles({
108
126
  },
109
127
  "filled-brand": {
110
128
  "De3pzq": "ffp7eso",
111
- "sj55zd": "f1phragk",
112
- "g2u3we": "f1vp46cd",
113
- "h3c5rm": ["f1lxz1cr", "ff8nh0i"],
114
- "B9xav0g": "fe9j8it",
115
- "zhjwy3": ["ff8nh0i", "f1lxz1cr"]
129
+ "sj55zd": "f1phragk"
116
130
  },
117
131
  "filled-danger": {
118
132
  "De3pzq": "fdl5y0r",
119
- "sj55zd": "f1phragk",
120
- "g2u3we": "f11ttmz8",
121
- "h3c5rm": ["f1ratw88", "f459ikj"],
122
- "B9xav0g": "fvovscg",
123
- "zhjwy3": ["f459ikj", "f1ratw88"]
133
+ "sj55zd": "f1phragk"
124
134
  },
125
135
  "filled-important": {
126
136
  "De3pzq": "f1c73kur",
@@ -144,20 +154,11 @@ const useRootStyles = /*#__PURE__*/__styles({
144
154
  },
145
155
  "filled-warning": {
146
156
  "De3pzq": "ffq97bm",
147
- "sj55zd": "f19n0e5",
148
- "g2u3we": "f1gyeiz5",
149
- "h3c5rm": ["f1jnj1iq", "fd1epeu"],
150
- "B9xav0g": "f102bkgo",
151
- "zhjwy3": ["fd1epeu", "f1jnj1iq"]
152
- },
153
- "ghost": {
154
- "icvyot": "f1ern45e",
155
- "vrafjx": ["f1n71otn", "f1deefiw"],
156
- "oivjwe": "f1h8hb77",
157
- "wvpqe5": ["f1deefiw", "f1n71otn"]
157
+ "sj55zd": "ff5vbop"
158
158
  },
159
+ "ghost": {},
159
160
  "ghost-brand": {
160
- "sj55zd": "f1817uup"
161
+ "sj55zd": "f16muhyy"
161
162
  },
162
163
  "ghost-danger": {
163
164
  "sj55zd": "f1whyuy6"
@@ -187,7 +188,7 @@ const useRootStyles = /*#__PURE__*/__styles({
187
188
  "zhjwy3": ["f1p1bl80", "f1gkuv52"]
188
189
  },
189
190
  "outline-brand": {
190
- "sj55zd": "f1817uup"
191
+ "sj55zd": "f16muhyy"
191
192
  },
192
193
  "outline-danger": {
193
194
  "sj55zd": "f1whyuy6"
@@ -254,10 +255,10 @@ const useRootStyles = /*#__PURE__*/__styles({
254
255
  "tint-severe": {
255
256
  "De3pzq": "f1xzsg4",
256
257
  "sj55zd": "f1k5f75o",
257
- "g2u3we": "f18s257e",
258
- "h3c5rm": ["f13ptu4t", "fiwx4jo"],
259
- "B9xav0g": "f1geyuz0",
260
- "zhjwy3": ["fiwx4jo", "f13ptu4t"]
258
+ "g2u3we": "fxy9dsj",
259
+ "h3c5rm": ["f54u6j2", "fcm23ze"],
260
+ "B9xav0g": "f4vf0uq",
261
+ "zhjwy3": ["fcm23ze", "f54u6j2"]
261
262
  },
262
263
  "tint-subtle": {
263
264
  "De3pzq": "fxugw4r",
@@ -270,29 +271,43 @@ const useRootStyles = /*#__PURE__*/__styles({
270
271
  "tint-success": {
271
272
  "De3pzq": "f2vsrz6",
272
273
  "sj55zd": "ffmvakt",
273
- "g2u3we": "f3m3qtd",
274
- "h3c5rm": ["f1bjyn17", "fksln3n"],
275
- "B9xav0g": "frg4y0o",
276
- "zhjwy3": ["fksln3n", "f1bjyn17"]
274
+ "g2u3we": "fdmic9h",
275
+ "h3c5rm": ["f196y6m", "fetptd8"],
276
+ "B9xav0g": "f1pev5xq",
277
+ "zhjwy3": ["fetptd8", "f196y6m"]
277
278
  },
278
279
  "tint-warning": {
279
280
  "De3pzq": "f10s6hli",
280
281
  "sj55zd": "fpti2h4",
281
- "g2u3we": "f1e2bpek",
282
- "h3c5rm": ["fnu3uvp", "fdpwmi9"],
283
- "B9xav0g": "fk8fs0c",
284
- "zhjwy3": ["fdpwmi9", "fnu3uvp"]
282
+ "g2u3we": "fn9i3n",
283
+ "h3c5rm": ["f1aw8cx4", "f51if14"],
284
+ "B9xav0g": "fvq8iai",
285
+ "zhjwy3": ["f51if14", "f1aw8cx4"]
285
286
  }
286
287
  }, {
287
- "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;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".fq1loh5{padding-top:2px;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".futqtb8{padding-bottom:2px;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1n0apg3{font-size:8px;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".fnmn6fi{font-size:10px;}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".f1ugzwwg{font-size:12px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".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);}", ".fxyqdnz{border-bottom-right-radius:99px;}", ".fib3qew{border-bottom-left-radius:99px;}", ".f14p2bvz{border-top-right-radius:99px;}", ".fdqj3q4{border-top-left-radius:99px;}", ".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);}", ".f1vp46cd{border-top-color:var(--colorBrandBackground);}", ".f1lxz1cr{border-right-color:var(--colorBrandBackground);}", ".ff8nh0i{border-left-color:var(--colorBrandBackground);}", ".fe9j8it{border-bottom-color:var(--colorBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f11ttmz8{border-top-color:var(--colorPaletteRedBackground3);}", ".f1ratw88{border-right-color:var(--colorPaletteRedBackground3);}", ".f459ikj{border-left-color:var(--colorPaletteRedBackground3);}", ".fvovscg{border-bottom-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);}", ".f1gyeiz5{border-top-color:var(--colorPaletteYellowBackground3);}", ".f1jnj1iq{border-right-color:var(--colorPaletteYellowBackground3);}", ".fd1epeu{border-left-color:var(--colorPaletteYellowBackground3);}", ".f102bkgo{border-bottom-color:var(--colorPaletteYellowBackground3);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1817uup{color:var(--colorBrandBackground);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".f18s257e{border-top-color:var(--colorPaletteDarkOrangeForeground2);}", ".f13ptu4t{border-right-color:var(--colorPaletteDarkOrangeForeground2);}", ".fiwx4jo{border-left-color:var(--colorPaletteDarkOrangeForeground2);}", ".f1geyuz0{border-bottom-color:var(--colorPaletteDarkOrangeForeground2);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".f3m3qtd{border-top-color:var(--colorPaletteGreenBackground2);}", ".f1bjyn17{border-right-color:var(--colorPaletteGreenBackground2);}", ".fksln3n{border-left-color:var(--colorPaletteGreenBackground2);}", ".frg4y0o{border-bottom-color:var(--colorPaletteGreenBackground2);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f1e2bpek{border-top-color:var(--colorPaletteYellowBackground2);}", ".fnu3uvp{border-right-color:var(--colorPaletteYellowBackground2);}", ".fdpwmi9{border-left-color:var(--colorPaletteYellowBackground2);}", ".fk8fs0c{border-bottom-color:var(--colorPaletteYellowBackground2);}"]
288
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
288
289
  });
289
290
 
290
291
  const useIconStyles = /*#__PURE__*/__styles({
291
292
  "base": {
292
293
  "mc9l5x": "f22iagw",
293
- "Bmliigx": "fxe27oy",
294
- "Bt984gj": "f122n59",
295
- "Bqenvij": "f1l02sjl"
294
+ "Bg96gwp": "fp6vxd",
295
+ "B6of3ja": "f1hu3pq6",
296
+ "t21cq0": ["fqq8nkd", "f1fdzpd1"],
297
+ "jrapky": "f19f4twv",
298
+ "Frg6f3": ["f1fdzpd1", "fqq8nkd"]
299
+ },
300
+ "beforeText": {
301
+ "t21cq0": ["f1t8l4o1", "f11juvx6"]
302
+ },
303
+ "afterText": {
304
+ "Frg6f3": ["f11juvx6", "f1t8l4o1"]
305
+ },
306
+ "beforeTextXL": {
307
+ "t21cq0": ["f1rs9grm", "f1kwmkpi"]
308
+ },
309
+ "afterTextXL": {
310
+ "Frg6f3": ["f1kwmkpi", "f1rs9grm"]
296
311
  },
297
312
  "tiny": {
298
313
  "Be2twd7": "f1tccstq"
@@ -313,7 +328,7 @@ const useIconStyles = /*#__PURE__*/__styles({
313
328
  "Be2twd7": "fe5j1ua"
314
329
  }
315
330
  }, {
316
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fxe27oy{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1l02sjl{height:100%;}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
331
+ "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;}"]
317
332
  });
318
333
  /**
319
334
  * Applies style classnames to slots
@@ -322,11 +337,22 @@ const useIconStyles = /*#__PURE__*/__styles({
322
337
 
323
338
  export const useBadgeStyles_unstable = state => {
324
339
  const rootStyles = useRootStyles();
325
- state.root.className = mergeClasses(badgeClassNames.root, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
340
+ const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
341
+ 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);
326
342
  const iconStyles = useIconStyles();
327
343
 
328
344
  if (state.icon) {
329
- state.icon.className = mergeClasses(badgeClassNames.icon, iconStyles.base, iconStyles[state.size], state.icon.className);
345
+ let iconPositionClass;
346
+
347
+ if (state.root.children) {
348
+ if (state.size === 'extra-large') {
349
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
350
+ } else {
351
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
352
+ }
353
+ }
354
+
355
+ state.icon.className = mergeClasses(badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
330
356
  }
331
357
 
332
358
  return state;
package/lib/components/Badge/useBadgeStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { 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\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: tokens.fontWeightSemibold,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderStyle('solid'),\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding('2px'),\n ...shorthands.gap('4px'),\n fontSize: '8px',\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.gap('4px'),\n ...shorthands.padding('4px'),\n fontSize: '10px',\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding('4px'),\n fontSize: '12px',\n ...shorthands.gap('4px'),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding('6px'),\n ...shorthands.gap('6px'),\n fontSize: '12px',\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n\n // shape\n\n square: {\n // Default border radius\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius('99px'),\n },\n\n // appearance: filled\n\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandBackground),\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n },\n\n // appearance: ghost\n\n ghost: {\n ...shorthands.borderStyle('none'),\n },\n 'ghost-brand': {\n color: tokens.colorBrandBackground,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandBackground,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n rootStyles.roundedSmallToTiny,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Badge/useBadgeStyles.js CHANGED
@@ -12,7 +12,10 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
12
12
  exports.badgeClassNames = {
13
13
  root: 'fui-Badge',
14
14
  icon: 'fui-Badge__icon'
15
- };
15
+ }; // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
16
+ // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
17
+
18
+ const textPadding = react_theme_1.tokens.spacingHorizontalXXS;
16
19
 
17
20
  const useRootStyles = /*#__PURE__*/react_1.__styles({
18
21
  "base": {
@@ -20,77 +23,68 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
20
23
  "B7ck84d": "f1ewtqcl",
21
24
  "Bt984gj": "f122n59",
22
25
  "Brf1p80": "f4d9j23",
26
+ "qhf8xq": "f10pi13n",
27
+ "Bahqtrf": "fk6fouc",
28
+ "Be2twd7": "fy9rknc",
23
29
  "Bhrd7zp": "fl43uef",
24
- "B4j52fo": "f192inf7",
25
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
26
- "Bn0qgzm": "f1vxd6vx",
27
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
28
- "icvyot": "fzkkow9",
29
- "vrafjx": ["fcdblym", "fjik90z"],
30
- "oivjwe": "fg706s2",
31
- "wvpqe5": ["fjik90z", "fcdblym"],
30
+ "Bg96gwp": "fwrc4pm"
31
+ },
32
+ "fontSmallToTiny": {
32
33
  "Bahqtrf": "fk6fouc",
33
- "qhf8xq": "f10pi13n"
34
+ "Be2twd7": "f13mqy1h",
35
+ "Bhrd7zp": "fl43uef",
36
+ "Bg96gwp": "fcpl73t"
34
37
  },
35
38
  "tiny": {
36
39
  "a9b677": "f16dn6v3",
37
40
  "Bqenvij": "f3mu39s",
38
- "Be2twd7": "f130uwy9"
41
+ "Be2twd7": "f130uwy9",
42
+ "Bg96gwp": "fod1mrr"
39
43
  },
40
44
  "extra-small": {
41
45
  "a9b677": "fpd43o0",
42
46
  "Bqenvij": "f30q22z",
43
- "Be2twd7": "f1tccstq"
47
+ "Be2twd7": "f1tccstq",
48
+ "Bg96gwp": "f1y3arg5"
44
49
  },
45
50
  "small": {
46
51
  "Bf4jedk": "fq2vo04",
47
52
  "Bqenvij": "fd461yt",
48
- "z8tnut": "fq1loh5",
49
- "z189sj": ["f12huiiw", "f161knb0"],
50
- "Byoj8tv": "futqtb8",
51
- "uwmqm3": ["f161knb0", "f12huiiw"],
52
- "i8kkvl": "f1q8lukm",
53
- "Belr9w4": "f1ma2n7n",
54
- "Be2twd7": "f1n0apg3"
53
+ "z8tnut": "f1g0x7ka",
54
+ "z189sj": ["fps1v9c", "f17ae1jz"],
55
+ "Byoj8tv": "f1qch9an",
56
+ "uwmqm3": ["f17ae1jz", "fps1v9c"]
55
57
  },
56
58
  "medium": {
57
59
  "Bqenvij": "fjamq6b",
58
60
  "Bf4jedk": "f11u7vat",
59
- "i8kkvl": "f1q8lukm",
60
- "Belr9w4": "f1ma2n7n",
61
- "z8tnut": "f10ra9hq",
62
- "z189sj": ["f8wuabp", "fycuoez"],
63
- "Byoj8tv": "f1y2xyjm",
64
- "uwmqm3": ["fycuoez", "f8wuabp"],
65
- "Be2twd7": "fnmn6fi"
61
+ "z8tnut": "f1g0x7ka",
62
+ "z189sj": ["f17a92cs", "f1pe0i86"],
63
+ "Byoj8tv": "f1qch9an",
64
+ "uwmqm3": ["f1pe0i86", "f17a92cs"]
66
65
  },
67
66
  "large": {
68
67
  "Bf4jedk": "f17fgpbq",
69
68
  "Bqenvij": "frvgh55",
70
- "z8tnut": "f10ra9hq",
71
- "z189sj": ["f8wuabp", "fycuoez"],
72
- "Byoj8tv": "f1y2xyjm",
73
- "uwmqm3": ["fycuoez", "f8wuabp"],
74
- "Be2twd7": "f1ugzwwg",
75
- "i8kkvl": "f1q8lukm",
76
- "Belr9w4": "f1ma2n7n"
69
+ "z8tnut": "f1g0x7ka",
70
+ "z189sj": ["f17a92cs", "f1pe0i86"],
71
+ "Byoj8tv": "f1qch9an",
72
+ "uwmqm3": ["f1pe0i86", "f17a92cs"]
77
73
  },
78
74
  "extra-large": {
79
75
  "Bf4jedk": "fwbmr0d",
80
76
  "Bqenvij": "f1d2rq10",
81
- "z8tnut": "f1xp5gbu",
82
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
83
- "Byoj8tv": "f1d7kygh",
84
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
85
- "i8kkvl": "fgfbwa2",
86
- "Belr9w4": "f1y3hx6l",
87
- "Be2twd7": "f1ugzwwg",
88
- "B4j52fo": "f18zi460",
89
- "Bekrc4i": ["f1wpluaz", "fsfsuhs"],
90
- "Bn0qgzm": "fmklw6v",
91
- "ibv6hh": ["fsfsuhs", "f1wpluaz"]
92
- },
93
- "square": {},
77
+ "z8tnut": "f1g0x7ka",
78
+ "z189sj": ["fqznh8f", "f1xile11"],
79
+ "Byoj8tv": "f1qch9an",
80
+ "uwmqm3": ["f1xile11", "fqznh8f"]
81
+ },
82
+ "square": {
83
+ "Bbmb7ep": ["fzi6hpg", "fyowgf4"],
84
+ "Beyfa6y": ["fyowgf4", "fzi6hpg"],
85
+ "B7oj6ja": ["f3fg2lr", "f13av6d4"],
86
+ "Btl43ni": ["f13av6d4", "f3fg2lr"]
87
+ },
94
88
  "rounded": {
95
89
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
96
90
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
@@ -104,10 +98,34 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
104
98
  "Btl43ni": ["f1s4nn1u", "f1rstyi9"]
105
99
  },
106
100
  "circular": {
107
- "Bbmb7ep": ["fxyqdnz", "fib3qew"],
108
- "Beyfa6y": ["fib3qew", "fxyqdnz"],
109
- "B7oj6ja": ["f14p2bvz", "fdqj3q4"],
110
- "Btl43ni": ["fdqj3q4", "f14p2bvz"]
101
+ "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
102
+ "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
103
+ "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
104
+ "Btl43ni": ["f1s8kh49", "f1djnp8u"]
105
+ },
106
+ "border": {
107
+ "Bsft5z2": "f13zj6fq",
108
+ "E3zdtr": "f1mdlcz9",
109
+ "bn5sak": "frwkxtg",
110
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
111
+ "By385i5": "fo72kxq",
112
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
113
+ "Bm2nyyq": "f8rth92",
114
+ "Barhvk9": ["flthirb", "ftkbnf5"],
115
+ "Bw17bha": "f1lh990p",
116
+ "vfts7": ["ftkbnf5", "flthirb"],
117
+ "xrcqlc": "f6czdpx",
118
+ "Ihftqj": ["f13hvwk3", "f1en4csx"],
119
+ "Bcgy8vk": "f1i1u9k0",
120
+ "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
121
+ "B0n5ga8": "fhtl3ys",
122
+ "s924m2": ["f140b627", "f1wihoeh"],
123
+ "B1q35kw": "fplas78",
124
+ "Gp14am": ["f1wihoeh", "f140b627"],
125
+ "B3778ie": ["f1lf1ovl", "f1ydfmkj"],
126
+ "d9w3h3": ["f1ydfmkj", "f1lf1ovl"],
127
+ "Bl18szs": ["feq0ynf", "f1ss7ivt"],
128
+ "B4j8arr": ["f1ss7ivt", "feq0ynf"]
111
129
  },
112
130
  "filled": {
113
131
  "g2u3we": "fghlq4f",
@@ -117,19 +135,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
117
135
  },
118
136
  "filled-brand": {
119
137
  "De3pzq": "ffp7eso",
120
- "sj55zd": "f1phragk",
121
- "g2u3we": "f1vp46cd",
122
- "h3c5rm": ["f1lxz1cr", "ff8nh0i"],
123
- "B9xav0g": "fe9j8it",
124
- "zhjwy3": ["ff8nh0i", "f1lxz1cr"]
138
+ "sj55zd": "f1phragk"
125
139
  },
126
140
  "filled-danger": {
127
141
  "De3pzq": "fdl5y0r",
128
- "sj55zd": "f1phragk",
129
- "g2u3we": "f11ttmz8",
130
- "h3c5rm": ["f1ratw88", "f459ikj"],
131
- "B9xav0g": "fvovscg",
132
- "zhjwy3": ["f459ikj", "f1ratw88"]
142
+ "sj55zd": "f1phragk"
133
143
  },
134
144
  "filled-important": {
135
145
  "De3pzq": "f1c73kur",
@@ -153,20 +163,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
153
163
  },
154
164
  "filled-warning": {
155
165
  "De3pzq": "ffq97bm",
156
- "sj55zd": "f19n0e5",
157
- "g2u3we": "f1gyeiz5",
158
- "h3c5rm": ["f1jnj1iq", "fd1epeu"],
159
- "B9xav0g": "f102bkgo",
160
- "zhjwy3": ["fd1epeu", "f1jnj1iq"]
161
- },
162
- "ghost": {
163
- "icvyot": "f1ern45e",
164
- "vrafjx": ["f1n71otn", "f1deefiw"],
165
- "oivjwe": "f1h8hb77",
166
- "wvpqe5": ["f1deefiw", "f1n71otn"]
166
+ "sj55zd": "ff5vbop"
167
167
  },
168
+ "ghost": {},
168
169
  "ghost-brand": {
169
- "sj55zd": "f1817uup"
170
+ "sj55zd": "f16muhyy"
170
171
  },
171
172
  "ghost-danger": {
172
173
  "sj55zd": "f1whyuy6"
@@ -196,7 +197,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
196
197
  "zhjwy3": ["f1p1bl80", "f1gkuv52"]
197
198
  },
198
199
  "outline-brand": {
199
- "sj55zd": "f1817uup"
200
+ "sj55zd": "f16muhyy"
200
201
  },
201
202
  "outline-danger": {
202
203
  "sj55zd": "f1whyuy6"
@@ -263,10 +264,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
263
264
  "tint-severe": {
264
265
  "De3pzq": "f1xzsg4",
265
266
  "sj55zd": "f1k5f75o",
266
- "g2u3we": "f18s257e",
267
- "h3c5rm": ["f13ptu4t", "fiwx4jo"],
268
- "B9xav0g": "f1geyuz0",
269
- "zhjwy3": ["fiwx4jo", "f13ptu4t"]
267
+ "g2u3we": "fxy9dsj",
268
+ "h3c5rm": ["f54u6j2", "fcm23ze"],
269
+ "B9xav0g": "f4vf0uq",
270
+ "zhjwy3": ["fcm23ze", "f54u6j2"]
270
271
  },
271
272
  "tint-subtle": {
272
273
  "De3pzq": "fxugw4r",
@@ -279,29 +280,43 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
279
280
  "tint-success": {
280
281
  "De3pzq": "f2vsrz6",
281
282
  "sj55zd": "ffmvakt",
282
- "g2u3we": "f3m3qtd",
283
- "h3c5rm": ["f1bjyn17", "fksln3n"],
284
- "B9xav0g": "frg4y0o",
285
- "zhjwy3": ["fksln3n", "f1bjyn17"]
283
+ "g2u3we": "fdmic9h",
284
+ "h3c5rm": ["f196y6m", "fetptd8"],
285
+ "B9xav0g": "f1pev5xq",
286
+ "zhjwy3": ["fetptd8", "f196y6m"]
286
287
  },
287
288
  "tint-warning": {
288
289
  "De3pzq": "f10s6hli",
289
290
  "sj55zd": "fpti2h4",
290
- "g2u3we": "f1e2bpek",
291
- "h3c5rm": ["fnu3uvp", "fdpwmi9"],
292
- "B9xav0g": "fk8fs0c",
293
- "zhjwy3": ["fdpwmi9", "fnu3uvp"]
291
+ "g2u3we": "fn9i3n",
292
+ "h3c5rm": ["f1aw8cx4", "f51if14"],
293
+ "B9xav0g": "fvq8iai",
294
+ "zhjwy3": ["f51if14", "f1aw8cx4"]
294
295
  }
295
296
  }, {
296
- "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;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".fq1loh5{padding-top:2px;}", ".f12huiiw{padding-right:2px;}", ".f161knb0{padding-left:2px;}", ".futqtb8{padding-bottom:2px;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1n0apg3{font-size:8px;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".fnmn6fi{font-size:10px;}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".f1ugzwwg{font-size:12px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".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);}", ".fxyqdnz{border-bottom-right-radius:99px;}", ".fib3qew{border-bottom-left-radius:99px;}", ".f14p2bvz{border-top-right-radius:99px;}", ".fdqj3q4{border-top-left-radius:99px;}", ".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);}", ".f1vp46cd{border-top-color:var(--colorBrandBackground);}", ".f1lxz1cr{border-right-color:var(--colorBrandBackground);}", ".ff8nh0i{border-left-color:var(--colorBrandBackground);}", ".fe9j8it{border-bottom-color:var(--colorBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f11ttmz8{border-top-color:var(--colorPaletteRedBackground3);}", ".f1ratw88{border-right-color:var(--colorPaletteRedBackground3);}", ".f459ikj{border-left-color:var(--colorPaletteRedBackground3);}", ".fvovscg{border-bottom-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);}", ".f1gyeiz5{border-top-color:var(--colorPaletteYellowBackground3);}", ".f1jnj1iq{border-right-color:var(--colorPaletteYellowBackground3);}", ".fd1epeu{border-left-color:var(--colorPaletteYellowBackground3);}", ".f102bkgo{border-bottom-color:var(--colorPaletteYellowBackground3);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1817uup{color:var(--colorBrandBackground);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".f18s257e{border-top-color:var(--colorPaletteDarkOrangeForeground2);}", ".f13ptu4t{border-right-color:var(--colorPaletteDarkOrangeForeground2);}", ".fiwx4jo{border-left-color:var(--colorPaletteDarkOrangeForeground2);}", ".f1geyuz0{border-bottom-color:var(--colorPaletteDarkOrangeForeground2);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".f3m3qtd{border-top-color:var(--colorPaletteGreenBackground2);}", ".f1bjyn17{border-right-color:var(--colorPaletteGreenBackground2);}", ".fksln3n{border-left-color:var(--colorPaletteGreenBackground2);}", ".frg4y0o{border-bottom-color:var(--colorPaletteGreenBackground2);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f1e2bpek{border-top-color:var(--colorPaletteYellowBackground2);}", ".fnu3uvp{border-right-color:var(--colorPaletteYellowBackground2);}", ".fdpwmi9{border-left-color:var(--colorPaletteYellowBackground2);}", ".fk8fs0c{border-bottom-color:var(--colorPaletteYellowBackground2);}"]
297
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1sms7z7{color:var(--colorPaletteGreenForeground2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
297
298
  });
298
299
 
299
300
  const useIconStyles = /*#__PURE__*/react_1.__styles({
300
301
  "base": {
301
302
  "mc9l5x": "f22iagw",
302
- "Bmliigx": "fxe27oy",
303
- "Bt984gj": "f122n59",
304
- "Bqenvij": "f1l02sjl"
303
+ "Bg96gwp": "fp6vxd",
304
+ "B6of3ja": "f1hu3pq6",
305
+ "t21cq0": ["fqq8nkd", "f1fdzpd1"],
306
+ "jrapky": "f19f4twv",
307
+ "Frg6f3": ["f1fdzpd1", "fqq8nkd"]
308
+ },
309
+ "beforeText": {
310
+ "t21cq0": ["f1t8l4o1", "f11juvx6"]
311
+ },
312
+ "afterText": {
313
+ "Frg6f3": ["f11juvx6", "f1t8l4o1"]
314
+ },
315
+ "beforeTextXL": {
316
+ "t21cq0": ["f1rs9grm", "f1kwmkpi"]
317
+ },
318
+ "afterTextXL": {
319
+ "Frg6f3": ["f1kwmkpi", "f1rs9grm"]
305
320
  },
306
321
  "tiny": {
307
322
  "Be2twd7": "f1tccstq"
@@ -322,7 +337,7 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
322
337
  "Be2twd7": "fe5j1ua"
323
338
  }
324
339
  }, {
325
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fxe27oy{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1l02sjl{height:100%;}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
340
+ "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;}"]
326
341
  });
327
342
  /**
328
343
  * Applies style classnames to slots
@@ -331,11 +346,22 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
331
346
 
332
347
  const useBadgeStyles_unstable = state => {
333
348
  const rootStyles = useRootStyles();
334
- state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
349
+ const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
350
+ 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);
335
351
  const iconStyles = useIconStyles();
336
352
 
337
353
  if (state.icon) {
338
- state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconStyles[state.size], state.icon.className);
354
+ let iconPositionClass;
355
+
356
+ if (state.root.children) {
357
+ if (state.size === 'extra-large') {
358
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
359
+ } else {
360
+ iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
361
+ }
362
+ }
363
+
364
+ state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
339
365
  }
340
366
 
341
367
  return state;
package/lib-commonjs/components/Badge/useBadgeStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { 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\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: tokens.fontWeightSemibold,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderStyle('solid'),\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding('2px'),\n ...shorthands.gap('4px'),\n fontSize: '8px',\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.gap('4px'),\n ...shorthands.padding('4px'),\n fontSize: '10px',\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding('4px'),\n fontSize: '12px',\n ...shorthands.gap('4px'),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding('6px'),\n ...shorthands.gap('6px'),\n fontSize: '12px',\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n\n // shape\n\n square: {\n // Default border radius\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius('99px'),\n },\n\n // appearance: filled\n\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandBackground),\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n },\n\n // appearance: ghost\n\n ghost: {\n ...shorthands.borderStyle('none'),\n },\n 'ghost-brand': {\n color: tokens.colorBrandBackground,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandBackground,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n rootStyles.roundedSmallToTiny,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n },\n\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n\n // border (all appearances except ghost)\n\n border: {\n // The border is applied in an :after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderColor('inherit'),\n ...shorthands.borderRadius('inherit'),\n },\n },\n\n // appearance: filled\n\n filled: {\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n lineHeight: '1',\n ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n },\n\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance !== 'ghost' && rootStyles.border,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-badge",
3
- "version": "9.0.0",
3
+ "version": "9.0.3",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.9",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-icons": "^2.0.172-rc.8",
36
- "@griffel/react": "1.2.0",
35
+ "@fluentui/react-icons": "^2.0.175",
36
+ "@griffel/react": "^1.2.0",
37
37
  "@fluentui/react-theme": "^9.0.0",
38
- "@fluentui/react-utilities": "^9.0.0",
38
+ "@fluentui/react-utilities": "^9.0.2",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {