@fluentui/react-badge 9.1.4 → 9.1.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +58 -1
  3. package/CHANGELOG.md +18 -2
  4. package/lib/Badge.js.map +1 -1
  5. package/lib/CounterBadge.js.map +1 -1
  6. package/lib/PresenceBadge.js.map +1 -1
  7. package/lib/components/Badge/Badge.js.map +1 -1
  8. package/lib/components/Badge/Badge.types.js.map +1 -1
  9. package/lib/components/Badge/index.js.map +1 -1
  10. package/lib/components/Badge/renderBadge.js +1 -7
  11. package/lib/components/Badge/renderBadge.js.map +1 -1
  12. package/lib/components/Badge/useBadge.js +1 -0
  13. package/lib/components/Badge/useBadge.js.map +1 -1
  14. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  15. package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
  16. package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
  17. package/lib/components/CounterBadge/index.js.map +1 -1
  18. package/lib/components/CounterBadge/useCounterBadge.js +1 -0
  19. package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
  20. package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  21. package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
  22. package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  23. package/lib/components/PresenceBadge/index.js.map +1 -1
  24. package/lib/components/PresenceBadge/presenceIcons.js +34 -41
  25. package/lib/components/PresenceBadge/presenceIcons.js.map +1 -1
  26. package/lib/components/PresenceBadge/usePresenceBadge.js +2 -2
  27. package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  28. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +1 -1
  29. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  30. package/lib/index.js.map +1 -1
  31. package/lib-commonjs/Badge.js +5 -4
  32. package/lib-commonjs/Badge.js.map +1 -1
  33. package/lib-commonjs/CounterBadge.js +5 -4
  34. package/lib-commonjs/CounterBadge.js.map +1 -1
  35. package/lib-commonjs/PresenceBadge.js +5 -4
  36. package/lib-commonjs/PresenceBadge.js.map +1 -1
  37. package/lib-commonjs/components/Badge/Badge.js +19 -20
  38. package/lib-commonjs/components/Badge/Badge.js.map +1 -1
  39. package/lib-commonjs/components/Badge/Badge.types.js +3 -2
  40. package/lib-commonjs/components/Badge/Badge.types.js.map +1 -1
  41. package/lib-commonjs/components/Badge/index.js +8 -7
  42. package/lib-commonjs/components/Badge/index.js.map +1 -1
  43. package/lib-commonjs/components/Badge/renderBadge.js +13 -19
  44. package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
  45. package/lib-commonjs/components/Badge/useBadge.js +29 -34
  46. package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
  47. package/lib-commonjs/components/Badge/useBadgeStyles.js +608 -310
  48. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  49. package/lib-commonjs/components/CounterBadge/CounterBadge.js +19 -20
  50. package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
  51. package/lib-commonjs/components/CounterBadge/CounterBadge.types.js +3 -2
  52. package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map +1 -1
  53. package/lib-commonjs/components/CounterBadge/index.js +8 -7
  54. package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
  55. package/lib-commonjs/components/CounterBadge/useCounterBadge.js +24 -30
  56. package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
  57. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +54 -34
  58. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  59. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js +19 -20
  60. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
  61. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js +3 -2
  62. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  63. package/lib-commonjs/components/PresenceBadge/index.js +8 -7
  64. package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
  65. package/lib-commonjs/components/PresenceBadge/presenceIcons.js +146 -134
  66. package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -1
  67. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +61 -65
  68. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  69. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +102 -78
  70. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  71. package/lib-commonjs/index.js +28 -85
  72. package/lib-commonjs/index.js.map +1 -1
  73. package/package.json +9 -8
  74. package/lib-amd/Badge.js +0 -6
  75. package/lib-amd/Badge.js.map +0 -1
  76. package/lib-amd/CounterBadge.js +0 -6
  77. package/lib-amd/CounterBadge.js.map +0 -1
  78. package/lib-amd/PresenceBadge.js +0 -6
  79. package/lib-amd/PresenceBadge.js.map +0 -1
  80. package/lib-amd/components/Badge/Badge.js +0 -17
  81. package/lib-amd/components/Badge/Badge.js.map +0 -1
  82. package/lib-amd/components/Badge/Badge.types.js +0 -5
  83. package/lib-amd/components/Badge/Badge.types.js.map +0 -1
  84. package/lib-amd/components/Badge/index.js +0 -9
  85. package/lib-amd/components/Badge/index.js.map +0 -1
  86. package/lib-amd/components/Badge/renderBadge.js +0 -14
  87. package/lib-amd/components/Badge/renderBadge.js.map +0 -1
  88. package/lib-amd/components/Badge/useBadge.js +0 -27
  89. package/lib-amd/components/Badge/useBadge.js.map +0 -1
  90. package/lib-amd/components/Badge/useBadgeStyles.js +0 -212
  91. package/lib-amd/components/Badge/useBadgeStyles.js.map +0 -1
  92. package/lib-amd/components/CounterBadge/CounterBadge.js +0 -17
  93. package/lib-amd/components/CounterBadge/CounterBadge.js.map +0 -1
  94. package/lib-amd/components/CounterBadge/CounterBadge.types.js +0 -5
  95. package/lib-amd/components/CounterBadge/CounterBadge.types.js.map +0 -1
  96. package/lib-amd/components/CounterBadge/index.js +0 -9
  97. package/lib-amd/components/CounterBadge/index.js.map +0 -1
  98. package/lib-amd/components/CounterBadge/useCounterBadge.js +0 -18
  99. package/lib-amd/components/CounterBadge/useCounterBadge.js.map +0 -1
  100. package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js +0 -28
  101. package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js.map +0 -1
  102. package/lib-amd/components/PresenceBadge/PresenceBadge.js +0 -17
  103. package/lib-amd/components/PresenceBadge/PresenceBadge.js.map +0 -1
  104. package/lib-amd/components/PresenceBadge/PresenceBadge.types.js +0 -5
  105. package/lib-amd/components/PresenceBadge/PresenceBadge.types.js.map +0 -1
  106. package/lib-amd/components/PresenceBadge/index.js +0 -9
  107. package/lib-amd/components/PresenceBadge/index.js.map +0 -1
  108. package/lib-amd/components/PresenceBadge/presenceIcons.js +0 -146
  109. package/lib-amd/components/PresenceBadge/presenceIcons.js.map +0 -1
  110. package/lib-amd/components/PresenceBadge/usePresenceBadge.js +0 -53
  111. package/lib-amd/components/PresenceBadge/usePresenceBadge.js.map +0 -1
  112. package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js +0 -101
  113. package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js.map +0 -1
  114. package/lib-amd/index.js +0 -19
  115. package/lib-amd/index.js.map +0 -1
package/.swcrc ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/swcrc",
3
+ "exclude": [
4
+ "/testing",
5
+ "/**/*.cy.ts",
6
+ "/**/*.cy.tsx",
7
+ "/**/*.spec.ts",
8
+ "/**/*.spec.tsx",
9
+ "/**/*.test.ts",
10
+ "/**/*.test.tsx"
11
+ ],
12
+ "jsc": {
13
+ "parser": {
14
+ "syntax": "typescript",
15
+ "tsx": true,
16
+ "decorators": false,
17
+ "dynamicImport": false
18
+ },
19
+ "externalHelpers": true,
20
+ "transform": {
21
+ "react": {
22
+ "runtime": "classic",
23
+ "useSpread": true
24
+ }
25
+ },
26
+ "target": "es2019"
27
+ },
28
+ "minify": false,
29
+ "sourceMaps": true
30
+ }
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui/react-badge",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 16 Mar 2023 14:33:33 GMT",
5
+ "date": "Tue, 21 Mar 2023 21:18:37 GMT",
6
+ "tag": "@fluentui/react-badge_v9.1.5",
7
+ "version": "9.1.5",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-badge",
13
+ "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
14
+ "comment": "fix: add node field to package.json exports map."
15
+ },
16
+ {
17
+ "author": "makotom@microsoft.com",
18
+ "package": "@fluentui/react-badge",
19
+ "commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
20
+ "comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
21
+ },
22
+ {
23
+ "author": "tristan.watanabe@gmail.com",
24
+ "package": "@fluentui/react-badge",
25
+ "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
26
+ "comment": "chore: migrate to swc transpilation approach."
27
+ },
28
+ {
29
+ "author": "makotom@microsoft.com",
30
+ "package": "@fluentui/react-badge",
31
+ "commit": "9bba9cabc4f410930d3acb18cbe5f1d9c867c7f0",
32
+ "comment": "fix: Adding the correct icons to away+out-of-office PresenceBadges and adding the correct icons to use in large PresenceBadges."
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-badge",
37
+ "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
38
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-badge",
43
+ "comment": "Bump @fluentui/react-theme to v9.1.7",
44
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-badge",
49
+ "comment": "Bump @fluentui/react-utilities to v9.7.2",
50
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-badge",
55
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
56
+ "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Thu, 16 Mar 2023 14:36:59 GMT",
6
63
  "tag": "@fluentui/react-badge_v9.1.4",
7
64
  "version": "9.1.4",
8
65
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-badge
2
2
 
3
- This log was last generated on Thu, 16 Mar 2023 14:33:33 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 21 Mar 2023 21:18:37 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.5)
8
+
9
+ Tue, 21 Mar 2023 21:18:37 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.4..@fluentui/react-badge_v9.1.5)
11
+
12
+ ### Patches
13
+
14
+ - fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
15
+ - chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
16
+ - chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
17
+ - fix: Adding the correct icons to away+out-of-office PresenceBadges and adding the correct icons to use in large PresenceBadges. ([PR #27253](https://github.com/microsoft/fluentui/pull/27253) by makotom@microsoft.com)
18
+ - Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
19
+ - Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
21
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
22
+
7
23
  ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.4)
8
24
 
9
- Thu, 16 Mar 2023 14:33:33 GMT
25
+ Thu, 16 Mar 2023 14:36:59 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.3..@fluentui/react-badge_v9.1.4)
11
27
 
12
28
  ### Patches
package/lib/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}
1
+ {"version":3,"names":[],"sources":["../src/Badge.ts"],"sourcesContent":["export * from './components/Badge/index';\n"],"mappings":"AAAA,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}
1
+ {"version":3,"names":[],"sources":["../src/CounterBadge.ts"],"sourcesContent":["export * from './components/CounterBadge/index';\n"],"mappings":"AAAA,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"PresenceBadge.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/PresenceBadge/index';\n"]}
1
+ {"version":3,"names":[],"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export * from './components/PresenceBadge/index';\n"],"mappings":"AAAA,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n\n useBadgeStyles_unstable(state);\n\n const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,eAAe;AAIpD;;;AAGA,OAAO,MAAMC,KAAK,gBAAoCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGR,iBAAiB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE3CN,uBAAuB,CAACO,KAAK,CAAC;EAE9B,MAAM;IAAEP,uBAAuB,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACnFO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACM,WAAW,GAAG,OAAO"}
1
+ {"version":3,"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n\n useBadgeStyles_unstable(state);\n\n const { useBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQR,iBAAA,CAAkBM,KAAA,EAAOC,GAAA;EAEvCN,uBAAA,CAAwBO,KAAA;EAExB,MAAM;IAAEP,uBAAA,EAAyBQ;EAAe,CAAE,GAAGP,4BAAA;EACrDO,eAAA,CAAgBD,KAAA;EAEhB,OAAOL,oBAAA,CAAqBK,KAAA;AAC9B;AAEAJ,KAAA,CAAMM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"],"mappings":"AAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/Badge/index.ts"],"sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"],"mappings":"AAAA,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -5,12 +5,6 @@ export const renderBadge_unstable = state => {
5
5
  slots,
6
6
  slotProps
7
7
  } = getSlots(state);
8
- return /*#__PURE__*/React.createElement(slots.root, {
9
- ...slotProps.root
10
- }, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
11
- ...slotProps.icon
12
- }), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
13
- ...slotProps.icon
14
- }));
8
+ return /*#__PURE__*/React.createElement(slots.root, slotProps.root, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));
15
9
  };
16
10
  //# sourceMappingURL=renderBadge.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","getSlots","renderBadge_unstable","state","slots","slotProps","createElement","root","iconPosition","icon","children"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/renderBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n {state.root.children}\n {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BJ,KAAK,CAACK,YAAY,KAAK,QAAQ,IAAIJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,EACnFN,KAAK,CAACI,IAAI,CAACG,QAAQ,EACnBP,KAAK,CAACK,YAAY,KAAK,OAAO,IAAIJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACxE;AAEjB,CAAC"}
1
+ {"version":3,"names":["React","getSlots","renderBadge_unstable","state","slots","slotProps","createElement","root","iconPosition","icon","children"],"sources":["../../../src/components/Badge/renderBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n {state.root.children}\n {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAqBE,KAAA;EAElD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BJ,KAAA,CAAMK,YAAY,KAAK,YAAYJ,KAAA,CAAMK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,GAC/EN,KAAA,CAAMI,IAAI,CAACG,QAAQ,EACnBP,KAAA,CAAMK,YAAY,KAAK,WAAWJ,KAAA,CAAMK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGrF"}
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
2
3
  /**
3
4
  * Returns the props and state required to render the component
@@ -1 +1 @@
1
- {"version":3,"names":["getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const {\n shape = 'circular',\n size = 'medium',\n iconPosition = 'before',\n appearance = 'filled',\n color = 'brand',\n } = props;\n\n const state: BadgeState = {\n shape,\n size,\n iconPosition,\n appearance,\n color,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(props.icon),\n };\n\n return state;\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;AAGA,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,IAAI,GAAG,QAAQ;IACfC,YAAY,GAAG,QAAQ;IACvBC,UAAU,GAAG,QAAQ;IACrBC,KAAK,GAAG;EAAO,CAChB,GAAGN,KAAK;EAET,MAAMO,KAAK,GAAe;IACxBL,KAAK;IACLC,IAAI;IACJC,YAAY;IACZC,UAAU;IACVC,KAAK;IACLE,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE;KACP;IACDD,IAAI,EAAEZ,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD;KACJ,CAAC;IACFU,IAAI,EAAEZ,gBAAgB,CAACE,KAAK,CAACU,IAAI;GAClC;EAED,OAAOH,KAAK;AACd,CAAC"}
1
+ {"version":3,"names":["React","getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"sources":["../../../src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const {\n shape = 'circular',\n size = 'medium',\n iconPosition = 'before',\n appearance = 'filled',\n color = 'brand',\n } = props;\n\n const state: BadgeState = {\n shape,\n size,\n iconPosition,\n appearance,\n color,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(props.icon),\n };\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAGxD;;;AAGA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA4C;EAC/F,MAAM;IACJC,KAAA,GAAQ;IACRC,IAAA,GAAO;IACPC,YAAA,GAAe;IACfC,UAAA,GAAa;IACbC,KAAA,GAAQ;EAAO,CAChB,GAAGN,KAAA;EAEJ,MAAMO,KAAA,GAAoB;IACxBL,KAAA;IACAC,IAAA;IACAC,YAAA;IACAC,UAAA;IACAC,KAAA;IACAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;IACR;IACAD,IAAA,EAAMZ,qBAAA,CAAsB,OAAO;MACjCI,GAAA;MACA,GAAGD;IACL;IACAU,IAAA,EAAMZ,gBAAA,CAAiBE,KAAA,CAAMU,IAAI;EACnC;EAEA,OAAOH,KAAA;AACT"}
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","small","medium","large","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["../src/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n // Set by useRootClassName\n },\n\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","small","medium","large","square","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"sources":["../../../src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n ...typographyStyles.caption1Strong,\n height: '20px',\n minWidth: '20px',\n padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n borderRadius: tokens.borderRadiusCircular,\n // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n borderColor: tokens.colorTransparentStroke,\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n borderStyle: 'solid',\n borderColor: 'inherit',\n borderWidth: tokens.strokeWidthThin,\n borderRadius: 'inherit',\n },\n});\n\nconst useRootStyles = makeStyles({\n fontSmallToTiny: {\n ...typographyStyles.caption2Strong,\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n lineHeight: '4px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n lineHeight: '6px',\n minWidth: 'unset',\n ...shorthands.padding('unset'),\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n },\n medium: {\n // Set by useRootClassName\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n },\n\n // shape\n\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n // Set by useRootClassName\n },\n\n // hide the boder when appearance is \"ghost\"\n\n borderGhost: {\n // The border is applied in an ::after pseudo-element because it should not affect layout.\n // The padding and size of the badge should be the same regardless of whether or not it has a border.\n '::after': {\n display: 'none',\n },\n },\n\n // appearance: filled\n\n filled: {\n // Set by useRootClassName\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1Static,\n },\n\n // appearance: ghost\n\n ghost: {\n // No shared colors between ghost appearances\n },\n 'ghost-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandForeground1,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground3,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n },\n});\n\nconst useIconRootClassName = makeResetStyles({\n display: 'flex',\n lineHeight: '1',\n margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n beforeText: {\n marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n afterText: {\n marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n },\n\n beforeTextXL: {\n marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n afterTextXL: {\n marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n // Set by useIconRootClassName\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootClassName = useRootClassName();\n const rootStyles = useRootStyles();\n\n const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootClassName,\n smallToTiny && rootStyles.fontSmallToTiny,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n state.appearance === 'ghost' && rootStyles.borderGhost,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconRootClassName = useIconRootClassName();\n const iconStyles = useIconStyles();\n if (state.icon) {\n let iconPositionClass;\n if (state.root.children) {\n if (state.size === 'extra-large') {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n } else {\n iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n }\n }\n\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconRootClassName,\n iconPositionClass,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n const state = useCounterBadge_unstable(props, ref);\n\n useCounterBadgeStyles_unstable(state);\n\n const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGR,wBAAwB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAElDN,8BAA8B,CAACO,KAAK,CAAC;EAErC,MAAM;IAAEP,8BAA8B,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC1FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,YAAY,CAACM,WAAW,GAAG,cAAc"}
1
+ {"version":3,"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n const state = useCounterBadge_unstable(props, ref);\n\n useCounterBadgeStyles_unstable(state);\n\n const { useCounterBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQR,wBAAA,CAAyBM,KAAA,EAAOC,GAAA;EAE9CN,8BAAA,CAA+BO,KAAA;EAE/B,MAAM;IAAEP,8BAAA,EAAgCQ;EAAe,CAAE,GAAGP,4BAAA;EAC5DO,eAAA,CAAgBD,KAAA;EAEhB,OAAOL,oBAAA,CAAqBK,KAAA;AAC9B;AAEAJ,YAAA,CAAaM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n /**\n * A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n */\n appearance?: 'filled' | 'ghost';\n\n /**\n * Semantic colors for a counter badge\n * @default brand\n */\n color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n /**\n * Value displayed by the Badge\n * @default 0\n */\n count?: number;\n\n /**\n * If a dot should be displayed without the count\n * @default false\n */\n dot?: boolean;\n\n /**\n * Max number to be displayed\n * @default 99\n */\n overflowCount?: number;\n\n /**\n * A Badge can be circular or rounded\n * @default circular\n */\n shape?: 'circular' | 'rounded';\n\n /**\n * If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/CounterBadge/CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n /**\n * A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n */\n appearance?: 'filled' | 'ghost';\n\n /**\n * Semantic colors for a counter badge\n * @default brand\n */\n color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n /**\n * Value displayed by the Badge\n * @default 0\n */\n count?: number;\n\n /**\n * If a dot should be displayed without the count\n * @default false\n */\n dot?: boolean;\n\n /**\n * Max number to be displayed\n * @default 99\n */\n overflowCount?: number;\n\n /**\n * A Badge can be circular or rounded\n * @default circular\n */\n shape?: 'circular' | 'rounded';\n\n /**\n * If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"],"mappings":"AAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/CounterBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/CounterBadge/index.ts"],"sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -1,3 +1,4 @@
1
+ import * as React from 'react';
1
2
  import { useBadge_unstable } from '../Badge/index';
2
3
  /**
3
4
  * Returns the props and state required to render the component
@@ -1 +1 @@
1
- {"version":3,"names":["useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if ((count !== 0 || showZero) && !dot && !state.root.children) {\n state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n }\n\n return state;\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,gBAAgB;AAGlD;;;AAGA,OAAO,MAAMC,wBAAwB,GAAGA,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,UAAU,GAAG,QAAQ;IACrBC,QAAQ,GAAG,KAAK;IAChBC,aAAa,GAAG,EAAE;IAClBC,KAAK,GAAG,CAAC;IACTC,GAAG,GAAG;EAAK,CACZ,GAAGP,KAAK;EAET,MAAMQ,KAAK,GAAsB;IAC/B,GAAIV,iBAAiB,CAACE,KAAK,EAAEC,GAAG,CAA+C;IAC/EC,KAAK;IACLC,UAAU;IACVC,QAAQ;IACRE,KAAK;IACLC;GACD;EAED,IAAI,CAACD,KAAK,KAAK,CAAC,IAAIF,QAAQ,KAAK,CAACG,GAAG,IAAI,CAACC,KAAK,CAACC,IAAI,CAACC,QAAQ,EAAE;IAC7DF,KAAK,CAACC,IAAI,CAACC,QAAQ,GAAGJ,KAAK,GAAGD,aAAa,GAAG,GAAGA,aAAa,GAAG,GAAG,GAAGC,KAAK,EAAE;;EAGhF,OAAOE,KAAK;AACd,CAAC"}
1
+ {"version":3,"names":["React","useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"sources":["../../../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if ((count !== 0 || showZero) && !dot && !state.root.children) {\n state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n }\n\n return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,iBAAiB,QAAQ;AAGlC;;;AAGA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAM;IACJC,KAAA,GAAQ;IACRC,UAAA,GAAa;IACbC,QAAA,GAAW,KAAK;IAChBC,aAAA,GAAgB;IAChBC,KAAA,GAAQ;IACRC,GAAA,GAAM;EAAK,CACZ,GAAGP,KAAA;EAEJ,MAAMQ,KAAA,GAA2B;IAC/B,GAAIV,iBAAA,CAAkBE,KAAA,EAAOC,GAAA,CAAI;IACjCC,KAAA;IACAC,UAAA;IACAC,QAAA;IACAE,KAAA;IACAC;EACF;EAEA,IAAI,CAACD,KAAA,KAAU,KAAKF,QAAO,KAAM,CAACG,GAAA,IAAO,CAACC,KAAA,CAAMC,IAAI,CAACC,QAAQ,EAAE;IAC7DF,KAAA,CAAMC,IAAI,CAACC,QAAQ,GAAGJ,KAAA,GAAQD,aAAA,GAAiB,GAAEA,aAAc,GAAE,GAAI,GAAEC,KAAM,EAAC;EAChF;EAEA,OAAOE,KAAA;AACT"}
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["../src/packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...shorthands.padding('0'),\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.root.children && !state.dot && styles.hide,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n\n return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,uBAAuB,QAAQ,yBAAyB;AAKjE,OAAO,MAAMC,sBAAsB,GAA+B;EAChEC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAUhB;AAEF;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGd,SAAS,EAAE;EAC1Ba,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CACjCG,sBAAsB,CAACC,IAAI,EAC3Be,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACb,GAAG,EACvB,CAACY,KAAK,CAACf,IAAI,CAACkB,QAAQ,IAAI,CAACH,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACL,IAAI,EACjDI,KAAK,CAACf,IAAI,CAACiB,SAAS,CACrB;EAED,IAAIF,KAAK,CAACd,IAAI,EAAE;IACdc,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;;EAGxF,OAAOnB,uBAAuB,CAACiB,KAAK,CAAsB;AAC5D,CAAC"}
1
+ {"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["../../../src/components/CounterBadge/useCounterBadgeStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...shorthands.padding('0'),\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.root.children && !state.dot && styles.hide,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n\n return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,uBAAuB,QAAQ;AAKxC,OAAO,MAAMC,sBAAA,GAAqD;EAChEC,IAAA,EAAM;EACNC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAUlB;AAEA;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgD;EAC7F,MAAMC,MAAA,GAASd,SAAA;EACfa,KAAA,CAAMf,IAAI,CAACiB,SAAS,GAAGrB,YAAA,CACrBG,sBAAA,CAAuBC,IAAI,EAC3Be,KAAA,CAAMZ,GAAG,IAAIa,MAAA,CAAOb,GAAG,EACvB,CAACY,KAAA,CAAMf,IAAI,CAACkB,QAAQ,IAAI,CAACH,KAAA,CAAMZ,GAAG,IAAIa,MAAA,CAAOL,IAAI,EACjDI,KAAA,CAAMf,IAAI,CAACiB,SAAS;EAGtB,IAAIF,KAAA,CAAMd,IAAI,EAAE;IACdc,KAAA,CAAMd,IAAI,CAACgB,SAAS,GAAGrB,YAAA,CAAaG,sBAAA,CAAuBE,IAAI,EAAEc,KAAA,CAAMd,IAAI,CAACgB,SAAS;EACvF;EAEA,OAAOnB,uBAAA,CAAwBiB,KAAA;AACjC"}
@@ -1 +1 @@
1
- {"version":3,"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,4BAA4B,QAAQ,iCAAiC;AAC9E,SAASC,oBAAoB,QAAQ,aAAa;AAIlD;;;AAGA,OAAO,MAAMC,aAAa,gBAA4CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGR,yBAAyB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEnDN,+BAA+B,CAACO,KAAK,CAAC;EAEtC,MAAM;IAAEP,+BAA+B,EAAEQ;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EAC3FO,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOL,oBAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,aAAa,CAACM,WAAW,GAAG,eAAe"}
1
+ {"version":3,"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHooks_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n const { usePresenceBadgeStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,+BAA+B,QAAQ;AAChD,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,oBAAoB,QAAQ;AAIrC;;;AAGA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CN,+BAAA,CAAgCO,KAAA;EAEhC,MAAM;IAAEP,+BAAA,EAAiCQ;EAAe,CAAE,GAAGP,4BAAA;EAC7DO,eAAA,CAAgBD,KAAA;EAEhB,OAAOL,oBAAA,CAAqBK,KAAA;AAC9B;AAEAJ,aAAA,CAAcM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"file":"PresenceBadge.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n"],"mappings":"AAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles';\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/PresenceBadge/index.ts"],"sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -1,4 +1,17 @@
1
- import { PresenceAvailable10Regular, PresenceAvailable12Regular, PresenceAvailable16Regular, PresenceAvailable10Filled, PresenceAvailable12Filled, PresenceAvailable16Filled, PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, PresenceBlocked10Regular, PresenceBlocked12Regular, PresenceBlocked16Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, PresenceDnd10Regular, PresenceDnd12Regular, PresenceDnd16Regular, PresenceDnd10Filled, PresenceDnd12Filled, PresenceDnd16Filled, PresenceOof10Regular, PresenceOof12Regular, PresenceOof16Regular, PresenceOffline10Regular, PresenceOffline12Regular, PresenceOffline16Regular, PresenceUnknown10Regular, PresenceUnknown12Regular, PresenceUnknown16Regular } from '@fluentui/react-icons';
1
+ import * as React from 'react';
2
+ import { PresenceAvailable10Regular, PresenceAvailable12Regular, PresenceAvailable16Regular, PresenceAvailable20Regular, PresenceAvailable10Filled, PresenceAvailable12Filled, PresenceAvailable16Filled, PresenceAvailable20Filled, PresenceAway10Regular, PresenceAway12Regular, PresenceAway16Regular, PresenceAway20Regular, PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, PresenceAway20Filled, PresenceBlocked10Regular, PresenceBlocked12Regular, PresenceBlocked16Regular, PresenceBlocked20Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, PresenceBusy20Filled, PresenceDnd10Regular, PresenceDnd12Regular, PresenceDnd16Regular, PresenceDnd20Regular, PresenceDnd10Filled, PresenceDnd12Filled, PresenceDnd16Filled, PresenceDnd20Filled, PresenceOof10Regular, PresenceOof12Regular, PresenceOof16Regular, PresenceOof20Regular, PresenceOffline10Regular, PresenceOffline12Regular, PresenceOffline16Regular, PresenceOffline20Regular, PresenceUnknown10Regular, PresenceUnknown12Regular, PresenceUnknown16Regular, PresenceUnknown20Regular } from '@fluentui/react-icons';
3
+ export const presenceAwayRegular = {
4
+ // FIXME not all presence icon sizes are available
5
+ // https://github.com/microsoft/fluentui/issues/20650
6
+ tiny: PresenceAway10Regular,
7
+ 'extra-small': PresenceAway10Regular,
8
+ small: PresenceAway12Regular,
9
+ medium: PresenceAway16Regular,
10
+ large: PresenceAway20Regular,
11
+ // FIXME not all presence icon sizes are available
12
+ // https://github.com/microsoft/fluentui/issues/20650
13
+ 'extra-large': PresenceAway20Regular
14
+ };
2
15
  export const presenceAwayFilled = {
3
16
  // FIXME not all presence icon sizes are available
4
17
  // https://github.com/microsoft/fluentui/issues/20650
@@ -6,12 +19,10 @@ export const presenceAwayFilled = {
6
19
  'extra-small': PresenceAway10Filled,
7
20
  small: PresenceAway12Filled,
8
21
  medium: PresenceAway16Filled,
22
+ large: PresenceAway20Filled,
9
23
  // FIXME not all presence icon sizes are available
10
24
  // https://github.com/microsoft/fluentui/issues/20650
11
- large: PresenceAway16Filled,
12
- // FIXME not all presence icon sizes are available
13
- // https://github.com/microsoft/fluentui/issues/20650
14
- 'extra-large': PresenceAway16Filled
25
+ 'extra-large': PresenceAway20Filled
15
26
  };
16
27
  export const presenceAvailableRegular = {
17
28
  // FIXME not all presence icon sizes are available
@@ -20,12 +31,10 @@ export const presenceAvailableRegular = {
20
31
  'extra-small': PresenceAvailable10Regular,
21
32
  small: PresenceAvailable12Regular,
22
33
  medium: PresenceAvailable16Regular,
34
+ large: PresenceAvailable20Regular,
23
35
  // FIXME not all presence icon sizes are available
24
36
  // https://github.com/microsoft/fluentui/issues/20650
25
- large: PresenceAvailable16Regular,
26
- // FIXME not all presence icon sizes are available
27
- // https://github.com/microsoft/fluentui/issues/20650
28
- 'extra-large': PresenceAvailable16Regular
37
+ 'extra-large': PresenceAvailable20Regular
29
38
  };
30
39
  export const presenceAvailableFilled = {
31
40
  // FIXME not all presence icon sizes are available
@@ -34,12 +43,10 @@ export const presenceAvailableFilled = {
34
43
  'extra-small': PresenceAvailable10Filled,
35
44
  small: PresenceAvailable12Filled,
36
45
  medium: PresenceAvailable16Filled,
46
+ large: PresenceAvailable20Filled,
37
47
  // FIXME not all presence icon sizes are available
38
48
  // https://github.com/microsoft/fluentui/issues/20650
39
- large: PresenceAvailable16Filled,
40
- // FIXME not all presence icon sizes are available
41
- // https://github.com/microsoft/fluentui/issues/20650
42
- 'extra-large': PresenceAvailable16Filled
49
+ 'extra-large': PresenceAvailable20Filled
43
50
  };
44
51
  export const presenceBlockedRegular = {
45
52
  // FIXME not all presence icon sizes are available
@@ -48,12 +55,10 @@ export const presenceBlockedRegular = {
48
55
  'extra-small': PresenceBlocked10Regular,
49
56
  small: PresenceBlocked12Regular,
50
57
  medium: PresenceBlocked16Regular,
58
+ large: PresenceBlocked20Regular,
51
59
  // FIXME not all presence icon sizes are available
52
60
  // https://github.com/microsoft/fluentui/issues/20650
53
- large: PresenceBlocked16Regular,
54
- // FIXME not all presence icon sizes are available
55
- // https://github.com/microsoft/fluentui/issues/20650
56
- 'extra-large': PresenceBlocked16Regular
61
+ 'extra-large': PresenceBlocked20Regular
57
62
  };
58
63
  export const presenceBusyFilled = {
59
64
  // FIXME not all presence icon sizes are available
@@ -62,12 +67,10 @@ export const presenceBusyFilled = {
62
67
  'extra-small': PresenceBusy10Filled,
63
68
  small: PresenceBusy12Filled,
64
69
  medium: PresenceBusy16Filled,
70
+ large: PresenceBusy20Filled,
65
71
  // FIXME not all presence icon sizes are available
66
72
  // https://github.com/microsoft/fluentui/issues/20650
67
- large: PresenceBusy16Filled,
68
- // FIXME not all presence icon sizes are available
69
- // https://github.com/microsoft/fluentui/issues/20650
70
- 'extra-large': PresenceBusy16Filled
73
+ 'extra-large': PresenceBusy20Filled
71
74
  };
72
75
  export const presenceDndFilled = {
73
76
  // FIXME not all presence icon sizes are available
@@ -76,12 +79,10 @@ export const presenceDndFilled = {
76
79
  'extra-small': PresenceDnd10Filled,
77
80
  small: PresenceDnd12Filled,
78
81
  medium: PresenceDnd16Filled,
82
+ large: PresenceDnd20Filled,
79
83
  // FIXME not all presence icon sizes are available
80
84
  // https://github.com/microsoft/fluentui/issues/20650
81
- large: PresenceDnd16Filled,
82
- // FIXME not all presence icon sizes are available
83
- // https://github.com/microsoft/fluentui/issues/20650
84
- 'extra-large': PresenceDnd16Filled
85
+ 'extra-large': PresenceDnd20Filled
85
86
  };
86
87
  export const presenceDndRegular = {
87
88
  // FIXME not all presence icon sizes are available
@@ -90,12 +91,10 @@ export const presenceDndRegular = {
90
91
  'extra-small': PresenceDnd10Regular,
91
92
  small: PresenceDnd12Regular,
92
93
  medium: PresenceDnd16Regular,
94
+ large: PresenceDnd20Regular,
93
95
  // FIXME not all presence icon sizes are available
94
96
  // https://github.com/microsoft/fluentui/issues/20650
95
- large: PresenceDnd16Regular,
96
- // FIXME not all presence icon sizes are available
97
- // https://github.com/microsoft/fluentui/issues/20650
98
- 'extra-large': PresenceDnd16Regular
97
+ 'extra-large': PresenceDnd20Regular
99
98
  };
100
99
  export const presenceOofRegular = {
101
100
  // FIXME not all presence icon sizes are available
@@ -104,12 +103,10 @@ export const presenceOofRegular = {
104
103
  'extra-small': PresenceOof10Regular,
105
104
  small: PresenceOof12Regular,
106
105
  medium: PresenceOof16Regular,
106
+ large: PresenceOof20Regular,
107
107
  // FIXME not all presence icon sizes are available
108
108
  // https://github.com/microsoft/fluentui/issues/20650
109
- large: PresenceOof16Regular,
110
- // FIXME not all presence icon sizes are available
111
- // https://github.com/microsoft/fluentui/issues/20650
112
- 'extra-large': PresenceOof16Regular
109
+ 'extra-large': PresenceOof20Regular
113
110
  };
114
111
  export const presenceOfflineRegular = {
115
112
  // FIXME not all presence icon sizes are available
@@ -118,12 +115,10 @@ export const presenceOfflineRegular = {
118
115
  'extra-small': PresenceOffline10Regular,
119
116
  small: PresenceOffline12Regular,
120
117
  medium: PresenceOffline16Regular,
118
+ large: PresenceOffline20Regular,
121
119
  // FIXME not all presence icon sizes are available
122
120
  // https://github.com/microsoft/fluentui/issues/20650
123
- large: PresenceOffline16Regular,
124
- // FIXME not all presence icon sizes are available
125
- // https://github.com/microsoft/fluentui/issues/20650
126
- 'extra-large': PresenceOffline16Regular
121
+ 'extra-large': PresenceOffline20Regular
127
122
  };
128
123
  export const presenceUnknownRegular = {
129
124
  // FIXME not all presence icon sizes are available
@@ -132,11 +127,9 @@ export const presenceUnknownRegular = {
132
127
  'extra-small': PresenceUnknown10Regular,
133
128
  small: PresenceUnknown12Regular,
134
129
  medium: PresenceUnknown16Regular,
130
+ large: PresenceUnknown20Regular,
135
131
  // FIXME not all presence icon sizes are available
136
132
  // https://github.com/microsoft/fluentui/issues/20650
137
- large: PresenceUnknown16Regular,
138
- // FIXME not all presence icon sizes are available
139
- // https://github.com/microsoft/fluentui/issues/20650
140
- 'extra-large': PresenceUnknown16Regular
133
+ 'extra-large': PresenceUnknown20Regular
141
134
  };
142
135
  //# sourceMappingURL=presenceIcons.js.map