@atlaskit/badge 16.4.3 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/badge.compiled.css +24 -0
  3. package/dist/cjs/badge.js +33 -69
  4. package/dist/es2019/badge.compiled.css +24 -0
  5. package/dist/es2019/badge.js +30 -68
  6. package/dist/esm/badge.compiled.css +24 -0
  7. package/dist/esm/badge.js +30 -68
  8. package/package.json +8 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/badge
2
2
 
3
+ ## 17.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#102595](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102595)
8
+ [`d7f60cd2fb693`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7f60cd2fb693) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
11
+
12
+ Please note, in order to use this version of `@atlaskit/badge`, you will need to ensure that your
13
+ bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
14
+ for `.css` imports, so you may not need to do anything. If you are using a different bundler,
15
+ please refer to the documentation for that bundler to understand how to handle `.css` imports.
16
+
17
+ ## 16.4.4
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 16.4.3
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/badge.compiled.css ADDED
@@ -0,0 +1,24 @@
1
+
2
+ ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
3
+ ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1e0c116y{display:inline-flex}
7
+ ._1kz6184x{block-size:min-content}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._1ul91ejb{min-width:var(--ds-space-300,24px)}
10
+ ._bfhk1366{background-color:#fd9891}
11
+ ._bfhk1bay{background-color:var(--ds-background-success,#e3fcef)}
12
+ ._bfhk1fkg{background-color:#dddee1}
13
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
14
+ ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
15
+ ._bfhk1ymo{background-color:#8fb8f6}
16
+ ._bfhklecj{background-color:var(--ds-background-neutral,#dfe1e6)}
17
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
18
+ ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
19
+ ._bfhktaeo{background-color:var(--ds-background-danger,#ffebe6)}
20
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
21
+ ._syaz1e6v{color:var(--ds-text-brand,#0c66e4)}
22
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
23
+ ._syazwwip{color:#292a2e}
24
+ ._vchhusvi{box-sizing:border-box}
package/dist/cjs/badge.js CHANGED
@@ -1,27 +1,29 @@
1
+ /* badge.tsx generated by @compiled/babel-plugin v0.35.0 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
- var _react = require("react");
8
- var _react2 = require("@emotion/react");
9
+ require("./badge.compiled.css");
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ var React = _react;
12
+ var _runtime = require("@compiled/react/runtime");
9
13
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
14
  var _primitives = require("@atlaskit/primitives");
11
15
  var _utils = require("./internal/utils");
12
- /**
13
- * @jsxRuntime classic
14
- * @jsx jsx
15
- */
16
-
17
- // Compiled isn't ready to be used in components used by Ecosystem
18
-
19
- var boxStyles = (0, _primitives.xcss)({
20
- borderRadius: 'border.radius.200',
21
- display: 'inline-flex',
22
- blockSize: 'min-content',
23
- flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
24
- });
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ var boxStyles = {
19
+ root: "_2rkopd34 _18zr12x7 _1e0c116y _1o9zidpf _1kz6184x",
20
+ added: "_bfhk1bay",
21
+ default: "_bfhklecj",
22
+ important: "_bfhk1v7l",
23
+ primary: "_bfhkomb0",
24
+ primaryInverted: "_bfhkvuon",
25
+ removed: "_bfhktaeo"
26
+ };
25
27
 
26
28
  /**
27
29
  * Visual refresh colors.
@@ -35,40 +37,13 @@ var red300 = '#FD9891';
35
37
  var blue300 = '#8FB8F6';
36
38
  var neutral1000 = '#292A2E';
37
39
  var styles = {
38
- root: (0, _react2.css)({
39
- display: 'inline-flex',
40
- boxSizing: 'border-box',
41
- minWidth: "var(--ds-space-300, 24px)",
42
- justifyContent: 'center',
43
- flexShrink: 0,
44
- blockSize: 'min-content',
45
- borderRadius: "var(--ds-border-radius-050, 2px)",
46
- paddingInline: "var(--ds-space-050, 4px)"
47
- }),
48
- added: (0, _react2.css)({
49
- backgroundColor: "var(--ds-background-success, #DCFFF1)",
50
- color: "var(--ds-text, #172B4D)"
51
- }),
52
- default: (0, _react2.css)({
53
- backgroundColor: neutral300,
54
- color: neutral1000
55
- }),
56
- important: (0, _react2.css)({
57
- backgroundColor: red300,
58
- color: neutral1000
59
- }),
60
- primary: (0, _react2.css)({
61
- backgroundColor: blue300,
62
- color: neutral1000
63
- }),
64
- primaryInverted: (0, _react2.css)({
65
- backgroundColor: "var(--ds-surface, #FFFFFF)",
66
- color: "var(--ds-text-brand, #0C66E4)"
67
- }),
68
- removed: (0, _react2.css)({
69
- backgroundColor: "var(--ds-background-danger, #FFECEB)",
70
- color: "var(--ds-text, #172B4D)"
71
- })
40
+ root: "_2rkogqwt _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
41
+ added: "_bfhkmv6i _syaz1fxt",
42
+ default: "_bfhk1fkg _syazwwip",
43
+ important: "_bfhk1366 _syazwwip",
44
+ primary: "_bfhk1ymo _syazwwip",
45
+ primaryInverted: "_bfhkvuon _syaz1e6v",
46
+ removed: "_bfhk1gly _syaz1fxt"
72
47
  };
73
48
 
74
49
  /**
@@ -91,30 +66,27 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
91
66
  testId = _ref.testId;
92
67
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
93
68
  if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
94
- return (0, _react2.jsx)("span", {
69
+ return /*#__PURE__*/React.createElement("span", {
95
70
  "data-testid": testId,
96
- css: [styles.root, styles[appearance]],
97
71
  style: {
98
72
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
99
73
  color: style === null || style === void 0 ? void 0 : style.color
100
- }
101
- }, (0, _react2.jsx)(_primitives.Text, {
74
+ },
75
+ className: (0, _runtime.ax)([styles.root, styles[appearance]])
76
+ }, /*#__PURE__*/React.createElement(_primitives.Text, {
102
77
  size: "small",
103
78
  align: "center",
104
79
  color: "inherit"
105
80
  }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
106
81
  }
107
- return (0, _react2.jsx)(_primitives.Box, {
108
- testId: testId,
109
- as: "span",
110
- backgroundColor: backgroundColors[appearance],
111
- xcss: boxStyles,
82
+ return /*#__PURE__*/React.createElement("span", {
83
+ "data-testId": testId,
112
84
  style: {
113
- background: style === null || style === void 0 ? void 0 : style.backgroundColor,
85
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
114
86
  color: style === null || style === void 0 ? void 0 : style.color
115
87
  },
116
- paddingInline: "space.075"
117
- }, (0, _react2.jsx)(_primitives.Text, {
88
+ className: (0, _runtime.ax)([boxStyles.root, boxStyles[appearance]])
89
+ }, /*#__PURE__*/React.createElement(_primitives.Text, {
118
90
  size: "UNSAFE_small",
119
91
  align: "center",
120
92
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
@@ -122,14 +94,6 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
122
94
  });
123
95
  Badge.displayName = 'Badge';
124
96
  var _default = exports.default = Badge;
125
- var backgroundColors = {
126
- added: 'color.background.success',
127
- default: 'color.background.neutral',
128
- important: 'color.background.danger.bold',
129
- primary: 'color.background.brand.bold',
130
- primaryInverted: 'elevation.surface',
131
- removed: 'color.background.danger'
132
- };
133
97
  var textColors = {
134
98
  added: 'color.text.success',
135
99
  default: 'color.text',
package/dist/es2019/badge.compiled.css ADDED
@@ -0,0 +1,24 @@
1
+
2
+ ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
3
+ ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1e0c116y{display:inline-flex}
7
+ ._1kz6184x{block-size:min-content}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._1ul91ejb{min-width:var(--ds-space-300,24px)}
10
+ ._bfhk1366{background-color:#fd9891}
11
+ ._bfhk1bay{background-color:var(--ds-background-success,#e3fcef)}
12
+ ._bfhk1fkg{background-color:#dddee1}
13
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
14
+ ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
15
+ ._bfhk1ymo{background-color:#8fb8f6}
16
+ ._bfhklecj{background-color:var(--ds-background-neutral,#dfe1e6)}
17
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
18
+ ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
19
+ ._bfhktaeo{background-color:var(--ds-background-danger,#ffebe6)}
20
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
21
+ ._syaz1e6v{color:var(--ds-text-brand,#0c66e4)}
22
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
23
+ ._syazwwip{color:#292a2e}
24
+ ._vchhusvi{box-sizing:border-box}
package/dist/es2019/badge.js CHANGED
@@ -1,20 +1,20 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* badge.tsx generated by @compiled/babel-plugin v0.35.0 */
2
+ import "./badge.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
-
7
- // Compiled isn't ready to be used in components used by Ecosystem
8
- import { css, jsx } from '@emotion/react';
9
6
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { Box, Text, xcss } from '@atlaskit/primitives';
7
+ import { Text } from '@atlaskit/primitives';
11
8
  import { formatValue } from './internal/utils';
12
- const boxStyles = xcss({
13
- borderRadius: 'border.radius.200',
14
- display: 'inline-flex',
15
- blockSize: 'min-content',
16
- flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
17
- });
9
+ const boxStyles = {
10
+ root: "_2rkopd34 _18zr12x7 _1e0c116y _1o9zidpf _1kz6184x",
11
+ added: "_bfhk1bay",
12
+ default: "_bfhklecj",
13
+ important: "_bfhk1v7l",
14
+ primary: "_bfhkomb0",
15
+ primaryInverted: "_bfhkvuon",
16
+ removed: "_bfhktaeo"
17
+ };
18
18
 
19
19
  /**
20
20
  * Visual refresh colors.
@@ -28,40 +28,13 @@ const red300 = '#FD9891';
28
28
  const blue300 = '#8FB8F6';
29
29
  const neutral1000 = '#292A2E';
30
30
  const styles = {
31
- root: css({
32
- display: 'inline-flex',
33
- boxSizing: 'border-box',
34
- minWidth: "var(--ds-space-300, 24px)",
35
- justifyContent: 'center',
36
- flexShrink: 0,
37
- blockSize: 'min-content',
38
- borderRadius: "var(--ds-border-radius-050, 2px)",
39
- paddingInline: "var(--ds-space-050, 4px)"
40
- }),
41
- added: css({
42
- backgroundColor: "var(--ds-background-success, #DCFFF1)",
43
- color: "var(--ds-text, #172B4D)"
44
- }),
45
- default: css({
46
- backgroundColor: neutral300,
47
- color: neutral1000
48
- }),
49
- important: css({
50
- backgroundColor: red300,
51
- color: neutral1000
52
- }),
53
- primary: css({
54
- backgroundColor: blue300,
55
- color: neutral1000
56
- }),
57
- primaryInverted: css({
58
- backgroundColor: "var(--ds-surface, #FFFFFF)",
59
- color: "var(--ds-text-brand, #0C66E4)"
60
- }),
61
- removed: css({
62
- backgroundColor: "var(--ds-background-danger, #FFECEB)",
63
- color: "var(--ds-text, #172B4D)"
64
- })
31
+ root: "_2rkogqwt _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
32
+ added: "_bfhkmv6i _syaz1fxt",
33
+ default: "_bfhk1fkg _syazwwip",
34
+ important: "_bfhk1366 _syazwwip",
35
+ primary: "_bfhk1ymo _syazwwip",
36
+ primaryInverted: "_bfhkvuon _syaz1e6v",
37
+ removed: "_bfhk1gly _syaz1fxt"
65
38
  };
66
39
 
67
40
  /**
@@ -82,30 +55,27 @@ const Badge = /*#__PURE__*/memo(function Badge({
82
55
  }) {
83
56
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
84
57
  if (fg('platform-component-visual-refresh')) {
85
- return jsx("span", {
58
+ return /*#__PURE__*/React.createElement("span", {
86
59
  "data-testid": testId,
87
- css: [styles.root, styles[appearance]],
88
60
  style: {
89
61
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
90
62
  color: style === null || style === void 0 ? void 0 : style.color
91
- }
92
- }, jsx(Text, {
63
+ },
64
+ className: ax([styles.root, styles[appearance]])
65
+ }, /*#__PURE__*/React.createElement(Text, {
93
66
  size: "small",
94
67
  align: "center",
95
68
  color: "inherit"
96
69
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
97
70
  }
98
- return jsx(Box, {
99
- testId: testId,
100
- as: "span",
101
- backgroundColor: backgroundColors[appearance],
102
- xcss: boxStyles,
71
+ return /*#__PURE__*/React.createElement("span", {
72
+ "data-testId": testId,
103
73
  style: {
104
- background: style === null || style === void 0 ? void 0 : style.backgroundColor,
74
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
105
75
  color: style === null || style === void 0 ? void 0 : style.color
106
76
  },
107
- paddingInline: "space.075"
108
- }, jsx(Text, {
77
+ className: ax([boxStyles.root, boxStyles[appearance]])
78
+ }, /*#__PURE__*/React.createElement(Text, {
109
79
  size: "UNSAFE_small",
110
80
  align: "center",
111
81
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
@@ -113,14 +83,6 @@ const Badge = /*#__PURE__*/memo(function Badge({
113
83
  });
114
84
  Badge.displayName = 'Badge';
115
85
  export default Badge;
116
- const backgroundColors = {
117
- added: 'color.background.success',
118
- default: 'color.background.neutral',
119
- important: 'color.background.danger.bold',
120
- primary: 'color.background.brand.bold',
121
- primaryInverted: 'elevation.surface',
122
- removed: 'color.background.danger'
123
- };
124
86
  const textColors = {
125
87
  added: 'color.text.success',
126
88
  default: 'color.text',
package/dist/esm/badge.compiled.css ADDED
@@ -0,0 +1,24 @@
1
+
2
+ ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
3
+ ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
5
+ ._1bah1h6o{justify-content:center}
6
+ ._1e0c116y{display:inline-flex}
7
+ ._1kz6184x{block-size:min-content}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._1ul91ejb{min-width:var(--ds-space-300,24px)}
10
+ ._bfhk1366{background-color:#fd9891}
11
+ ._bfhk1bay{background-color:var(--ds-background-success,#e3fcef)}
12
+ ._bfhk1fkg{background-color:#dddee1}
13
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
14
+ ._bfhk1v7l{background-color:var(--ds-background-danger-bold,#de350b)}
15
+ ._bfhk1ymo{background-color:#8fb8f6}
16
+ ._bfhklecj{background-color:var(--ds-background-neutral,#dfe1e6)}
17
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
18
+ ._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
19
+ ._bfhktaeo{background-color:var(--ds-background-danger,#ffebe6)}
20
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
21
+ ._syaz1e6v{color:var(--ds-text-brand,#0c66e4)}
22
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
23
+ ._syazwwip{color:#292a2e}
24
+ ._vchhusvi{box-sizing:border-box}
package/dist/esm/badge.js CHANGED
@@ -1,20 +1,20 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* badge.tsx generated by @compiled/babel-plugin v0.35.0 */
2
+ import "./badge.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
-
7
- // Compiled isn't ready to be used in components used by Ecosystem
8
- import { css, jsx } from '@emotion/react';
9
6
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { Box, Text, xcss } from '@atlaskit/primitives';
7
+ import { Text } from '@atlaskit/primitives';
11
8
  import { formatValue } from './internal/utils';
12
- var boxStyles = xcss({
13
- borderRadius: 'border.radius.200',
14
- display: 'inline-flex',
15
- blockSize: 'min-content',
16
- flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
17
- });
9
+ var boxStyles = {
10
+ root: "_2rkopd34 _18zr12x7 _1e0c116y _1o9zidpf _1kz6184x",
11
+ added: "_bfhk1bay",
12
+ default: "_bfhklecj",
13
+ important: "_bfhk1v7l",
14
+ primary: "_bfhkomb0",
15
+ primaryInverted: "_bfhkvuon",
16
+ removed: "_bfhktaeo"
17
+ };
18
18
 
19
19
  /**
20
20
  * Visual refresh colors.
@@ -28,40 +28,13 @@ var red300 = '#FD9891';
28
28
  var blue300 = '#8FB8F6';
29
29
  var neutral1000 = '#292A2E';
30
30
  var styles = {
31
- root: css({
32
- display: 'inline-flex',
33
- boxSizing: 'border-box',
34
- minWidth: "var(--ds-space-300, 24px)",
35
- justifyContent: 'center',
36
- flexShrink: 0,
37
- blockSize: 'min-content',
38
- borderRadius: "var(--ds-border-radius-050, 2px)",
39
- paddingInline: "var(--ds-space-050, 4px)"
40
- }),
41
- added: css({
42
- backgroundColor: "var(--ds-background-success, #DCFFF1)",
43
- color: "var(--ds-text, #172B4D)"
44
- }),
45
- default: css({
46
- backgroundColor: neutral300,
47
- color: neutral1000
48
- }),
49
- important: css({
50
- backgroundColor: red300,
51
- color: neutral1000
52
- }),
53
- primary: css({
54
- backgroundColor: blue300,
55
- color: neutral1000
56
- }),
57
- primaryInverted: css({
58
- backgroundColor: "var(--ds-surface, #FFFFFF)",
59
- color: "var(--ds-text-brand, #0C66E4)"
60
- }),
61
- removed: css({
62
- backgroundColor: "var(--ds-background-danger, #FFECEB)",
63
- color: "var(--ds-text, #172B4D)"
64
- })
31
+ root: "_2rkogqwt _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
32
+ added: "_bfhkmv6i _syaz1fxt",
33
+ default: "_bfhk1fkg _syazwwip",
34
+ important: "_bfhk1366 _syazwwip",
35
+ primary: "_bfhk1ymo _syazwwip",
36
+ primaryInverted: "_bfhkvuon _syaz1e6v",
37
+ removed: "_bfhk1gly _syaz1fxt"
65
38
  };
66
39
 
67
40
  /**
@@ -84,30 +57,27 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
84
57
  testId = _ref.testId;
85
58
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
86
59
  if (fg('platform-component-visual-refresh')) {
87
- return jsx("span", {
60
+ return /*#__PURE__*/React.createElement("span", {
88
61
  "data-testid": testId,
89
- css: [styles.root, styles[appearance]],
90
62
  style: {
91
63
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
92
64
  color: style === null || style === void 0 ? void 0 : style.color
93
- }
94
- }, jsx(Text, {
65
+ },
66
+ className: ax([styles.root, styles[appearance]])
67
+ }, /*#__PURE__*/React.createElement(Text, {
95
68
  size: "small",
96
69
  align: "center",
97
70
  color: "inherit"
98
71
  }, typeof children === 'number' && max ? formatValue(children, max) : children));
99
72
  }
100
- return jsx(Box, {
101
- testId: testId,
102
- as: "span",
103
- backgroundColor: backgroundColors[appearance],
104
- xcss: boxStyles,
73
+ return /*#__PURE__*/React.createElement("span", {
74
+ "data-testId": testId,
105
75
  style: {
106
- background: style === null || style === void 0 ? void 0 : style.backgroundColor,
76
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
107
77
  color: style === null || style === void 0 ? void 0 : style.color
108
78
  },
109
- paddingInline: "space.075"
110
- }, jsx(Text, {
79
+ className: ax([boxStyles.root, boxStyles[appearance]])
80
+ }, /*#__PURE__*/React.createElement(Text, {
111
81
  size: "UNSAFE_small",
112
82
  align: "center",
113
83
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
@@ -115,14 +85,6 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
115
85
  });
116
86
  Badge.displayName = 'Badge';
117
87
  export default Badge;
118
- var backgroundColors = {
119
- added: 'color.background.success',
120
- default: 'color.background.neutral',
121
- important: 'color.background.danger.bold',
122
- primary: 'color.background.brand.bold',
123
- primaryInverted: 'elevation.surface',
124
- removed: 'color.background.danger'
125
- };
126
88
  var textColors = {
127
89
  added: 'color.text.success',
128
90
  default: 'color.text',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "16.4.3",
3
+ "version": "17.0.0",
4
4
  "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "team": "Design System Team",
29
29
  "website": {
30
30
  "name": "Badge",
31
- "category": "Components"
31
+ "category": "Status indicators"
32
32
  },
33
33
  "runReact18": true
34
34
  },
@@ -38,11 +38,12 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@atlaskit/codemod-utils": "^4.2.0",
41
+ "@atlaskit/css": "^0.7.0",
41
42
  "@atlaskit/platform-feature-flags": "^0.3.0",
42
- "@atlaskit/primitives": "^13.2.0",
43
- "@atlaskit/tokens": "^2.2.0",
43
+ "@atlaskit/primitives": "^13.3.0",
44
+ "@atlaskit/tokens": "^3.0.0",
44
45
  "@babel/runtime": "^7.0.0",
45
- "@emotion/react": "^11.7.1"
46
+ "@compiled/react": "^0.18.1"
46
47
  },
47
48
  "peerDependencies": {
48
49
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -51,7 +52,7 @@
51
52
  "@af/accessibility-testing": "*",
52
53
  "@af/integration-testing": "*",
53
54
  "@af/visual-regression": "*",
54
- "@atlaskit/ds-lib": "^3.2.0",
55
+ "@atlaskit/ds-lib": "^3.3.0",
55
56
  "@atlaskit/ssr": "*",
56
57
  "@atlassian/feature-flags-test-utils": "*",
57
58
  "@testing-library/react": "^12.1.5",
@@ -70,7 +71,7 @@
70
71
  "design-system": "v1",
71
72
  "styling": [
72
73
  "static",
73
- "emotion"
74
+ "compiled"
74
75
  ],
75
76
  "ui-components": [
76
77
  "primitives",