@atlaskit/lozenge 11.12.0 → 11.12.2

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 +18 -0
  2. package/dist/cjs/compiled/index.compiled.css +4 -16
  3. package/dist/cjs/compiled/index.js +20 -22
  4. package/dist/es2019/compiled/index.compiled.css +4 -16
  5. package/dist/es2019/compiled/index.js +20 -22
  6. package/dist/esm/compiled/index.compiled.css +4 -16
  7. package/dist/esm/compiled/index.js +20 -22
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.12.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#158114](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158114)
8
+ [`01676a379617b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01676a379617b) -
9
+ The experimental compiled variant makes use of the compiled Primitives variant.
10
+ - Updated dependencies
11
+
12
+ ## 11.12.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#157006](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157006)
17
+ [`8108b044c362b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8108b044c362b) -
18
+ Changes the way our JSX pragma is applied and removes Compiled as a direct dependency (it is still
19
+ an indirect dependncy via @atlaskit/css)
20
+
3
21
  ## 11.12.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/compiled/index.compiled.css CHANGED
@@ -1,38 +1,26 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
1
+
3
2
  ._19it14mp{border:1px solid #b7b9be}
4
3
  ._19it1am1{border:1px solid #94c748}
5
4
  ._19it1apr{border:1px solid #c97cf4}
6
5
  ._19it1cy7{border:1px solid #669df1}
7
6
  ._19itoa5t{border:1px solid #f87168}
8
7
  ._19itzi1n{border:1px solid #fca700}
8
+ ._2rko1l7b{border-radius:3px}
9
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
9
11
  ._1bto1l2s{text-overflow:ellipsis}
10
12
  ._1e0c116y{display:inline-flex}
11
13
  ._1kz6184x{block-size:min-content}
12
14
  ._1p1dangw{text-transform:uppercase}
13
15
  ._1reo15vq{overflow-x:hidden}
14
16
  ._1wyb1skh{font-size:11px}
15
- ._2rko1l7b{border-radius:3px}
16
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
17
  ._bfhk1366{background-color:#fd9891}
18
- ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
- ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
18
  ._bfhk1fkg{background-color:#dddee1}
21
- ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
- ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
- ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
- ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
19
  ._bfhk1ymo{background-color:#8fb8f6}
26
- ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
20
  ._bfhk3uhp{background-color:#b3df72}
28
- ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
- ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
- ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
- ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
21
  ._bfhkshej{background-color:#d8a0f7}
33
22
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
23
  ._bfhkxmjf{background-color:#f9c84e}
35
- ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
24
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
25
  ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
26
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
package/dist/cjs/compiled/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /* index.tsx generated by @compiled/babel-plugin v0.32.1 */
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -11,24 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
- var _primitives = require("@atlaskit/primitives");
14
+ var _compiled = require("@atlaskit/primitives/compiled");
15
15
  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); }
16
16
  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; }
17
17
  var stylesOld = {
18
18
  container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
19
- text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
20
- 'bg.bold.default': "_bfhkcdhy",
21
- 'bg.bold.inprogress': "_bfhk14wj",
22
- 'bg.bold.moved': "_bfhk190i",
23
- 'bg.bold.new': "_bfhk1lri",
24
- 'bg.bold.removed': "_bfhkybec",
25
- 'bg.bold.success': "_bfhk8emd",
26
- 'bg.subtle.default': "_bfhkm7j4",
27
- 'bg.subtle.inprogress': "_bfhk33gi",
28
- 'bg.subtle.moved': "_bfhk1tzq",
29
- 'bg.subtle.new': "_bfhk1nvp",
30
- 'bg.subtle.removed': "_bfhk1gly",
31
- 'bg.subtle.success': "_bfhkmv6i",
32
19
  'text.bold.default': "_syaz15cr",
33
20
  'text.bold.inprogress': "_syaz15cr",
34
21
  'text.bold.moved': "_syazal3n",
@@ -42,6 +29,11 @@ var stylesOld = {
42
29
  'text.subtle.removed': "_syaz1ick",
43
30
  'text.subtle.success': "_syaz17fi"
44
31
  };
32
+
33
+ // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
34
+ var stylesOldUnbounded = {
35
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c"
36
+ };
45
37
  var backgroundColorsOld = {
46
38
  bold: {
47
39
  default: 'color.background.neutral.bold',
@@ -60,6 +52,11 @@ var backgroundColorsOld = {
60
52
  success: 'color.background.success'
61
53
  }
62
54
  };
55
+
56
+ /**
57
+ * TODO: We should be using our bounded `cssMap` here, but most of
58
+ * these styles from the visual refresh are not in the Design System.
59
+ */
63
60
  var stylesNew = {
64
61
  container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
65
62
  text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
@@ -128,15 +125,16 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
128
125
  className: (0, _runtime.ax)([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
129
126
  }, children));
130
127
  }
131
- return /*#__PURE__*/React.createElement(_primitives.UNSAFE_SurfaceContext.Provider, {
132
- value: backgroundColorsOld[appearanceStyle][appearanceType]
133
- }, /*#__PURE__*/React.createElement("span", {
128
+ return /*#__PURE__*/React.createElement(_compiled.Box, {
129
+ as: "span",
130
+ backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
134
131
  style: {
135
132
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
136
133
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
137
134
  },
138
- "data-testid": testId,
139
- className: (0, _runtime.ax)([stylesOld.container, stylesOld["bg.".concat(appearanceStyle, ".").concat(appearanceType)]])
135
+ paddingInline: "space.050",
136
+ xcss: stylesOld.container,
137
+ testId: testId
140
138
  }, /*#__PURE__*/React.createElement("span", {
141
139
  style: {
142
140
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -144,8 +142,8 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
144
142
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
145
143
  },
146
144
  "data-testid": testId && "".concat(testId, "--text"),
147
- className: (0, _runtime.ax)([stylesOld.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
148
- }, children)));
145
+ className: (0, _runtime.ax)([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
146
+ }, children));
149
147
  });
150
148
  Lozenge.displayName = 'Lozenge';
151
149
  var _default = exports.default = Lozenge;
package/dist/es2019/compiled/index.compiled.css CHANGED
@@ -1,38 +1,26 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
1
+
3
2
  ._19it14mp{border:1px solid #b7b9be}
4
3
  ._19it1am1{border:1px solid #94c748}
5
4
  ._19it1apr{border:1px solid #c97cf4}
6
5
  ._19it1cy7{border:1px solid #669df1}
7
6
  ._19itoa5t{border:1px solid #f87168}
8
7
  ._19itzi1n{border:1px solid #fca700}
8
+ ._2rko1l7b{border-radius:3px}
9
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
9
11
  ._1bto1l2s{text-overflow:ellipsis}
10
12
  ._1e0c116y{display:inline-flex}
11
13
  ._1kz6184x{block-size:min-content}
12
14
  ._1p1dangw{text-transform:uppercase}
13
15
  ._1reo15vq{overflow-x:hidden}
14
16
  ._1wyb1skh{font-size:11px}
15
- ._2rko1l7b{border-radius:3px}
16
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
17
  ._bfhk1366{background-color:#fd9891}
18
- ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
- ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
18
  ._bfhk1fkg{background-color:#dddee1}
21
- ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
- ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
- ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
- ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
19
  ._bfhk1ymo{background-color:#8fb8f6}
26
- ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
20
  ._bfhk3uhp{background-color:#b3df72}
28
- ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
- ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
- ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
- ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
21
  ._bfhkshej{background-color:#d8a0f7}
33
22
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
23
  ._bfhkxmjf{background-color:#f9c84e}
35
- ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
24
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
25
  ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
26
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
package/dist/es2019/compiled/index.js CHANGED
@@ -1,25 +1,12 @@
1
- /* index.tsx generated by @compiled/babel-plugin v0.32.1 */
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
2
  import "./index.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo, useMemo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { UNSAFE_SurfaceContext as SurfaceContext } from '@atlaskit/primitives';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
8
  const stylesOld = {
9
9
  container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
10
- text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
11
- 'bg.bold.default': "_bfhkcdhy",
12
- 'bg.bold.inprogress': "_bfhk14wj",
13
- 'bg.bold.moved': "_bfhk190i",
14
- 'bg.bold.new': "_bfhk1lri",
15
- 'bg.bold.removed': "_bfhkybec",
16
- 'bg.bold.success': "_bfhk8emd",
17
- 'bg.subtle.default': "_bfhkm7j4",
18
- 'bg.subtle.inprogress': "_bfhk33gi",
19
- 'bg.subtle.moved': "_bfhk1tzq",
20
- 'bg.subtle.new': "_bfhk1nvp",
21
- 'bg.subtle.removed': "_bfhk1gly",
22
- 'bg.subtle.success': "_bfhkmv6i",
23
10
  'text.bold.default': "_syaz15cr",
24
11
  'text.bold.inprogress': "_syaz15cr",
25
12
  'text.bold.moved': "_syazal3n",
@@ -33,6 +20,11 @@ const stylesOld = {
33
20
  'text.subtle.removed': "_syaz1ick",
34
21
  'text.subtle.success': "_syaz17fi"
35
22
  };
23
+
24
+ // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
+ const stylesOldUnbounded = {
26
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c"
27
+ };
36
28
  const backgroundColorsOld = {
37
29
  bold: {
38
30
  default: 'color.background.neutral.bold',
@@ -51,6 +43,11 @@ const backgroundColorsOld = {
51
43
  success: 'color.background.success'
52
44
  }
53
45
  };
46
+
47
+ /**
48
+ * TODO: We should be using our bounded `cssMap` here, but most of
49
+ * these styles from the visual refresh are not in the Design System.
50
+ */
54
51
  const stylesNew = {
55
52
  container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
56
53
  text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
@@ -115,15 +112,16 @@ const Lozenge = /*#__PURE__*/memo(({
115
112
  className: ax([stylesNew.text, stylesNew[`text.${appearanceStyle}`]])
116
113
  }, children));
117
114
  }
118
- return /*#__PURE__*/React.createElement(SurfaceContext.Provider, {
119
- value: backgroundColorsOld[appearanceStyle][appearanceType]
120
- }, /*#__PURE__*/React.createElement("span", {
115
+ return /*#__PURE__*/React.createElement(Box, {
116
+ as: "span",
117
+ backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
121
118
  style: {
122
119
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
123
120
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
124
121
  },
125
- "data-testid": testId,
126
- className: ax([stylesOld.container, stylesOld[`bg.${appearanceStyle}.${appearanceType}`]])
122
+ paddingInline: "space.050",
123
+ xcss: stylesOld.container,
124
+ testId: testId
127
125
  }, /*#__PURE__*/React.createElement("span", {
128
126
  style: {
129
127
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -131,8 +129,8 @@ const Lozenge = /*#__PURE__*/memo(({
131
129
  maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
132
130
  },
133
131
  "data-testid": testId && `${testId}--text`,
134
- className: ax([stylesOld.text, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
135
- }, children)));
132
+ className: ax([stylesOldUnbounded.text, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
133
+ }, children));
136
134
  });
137
135
  Lozenge.displayName = 'Lozenge';
138
136
  export default Lozenge;
package/dist/esm/compiled/index.compiled.css CHANGED
@@ -1,38 +1,26 @@
1
- ._18m915vq{overflow-y:hidden}
2
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
1
+
3
2
  ._19it14mp{border:1px solid #b7b9be}
4
3
  ._19it1am1{border:1px solid #94c748}
5
4
  ._19it1apr{border:1px solid #c97cf4}
6
5
  ._19it1cy7{border:1px solid #669df1}
7
6
  ._19itoa5t{border:1px solid #f87168}
8
7
  ._19itzi1n{border:1px solid #fca700}
8
+ ._2rko1l7b{border-radius:3px}
9
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
9
11
  ._1bto1l2s{text-overflow:ellipsis}
10
12
  ._1e0c116y{display:inline-flex}
11
13
  ._1kz6184x{block-size:min-content}
12
14
  ._1p1dangw{text-transform:uppercase}
13
15
  ._1reo15vq{overflow-x:hidden}
14
16
  ._1wyb1skh{font-size:11px}
15
- ._2rko1l7b{border-radius:3px}
16
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
17
  ._bfhk1366{background-color:#fd9891}
18
- ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
- ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
18
  ._bfhk1fkg{background-color:#dddee1}
21
- ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
- ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
- ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
- ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
19
  ._bfhk1ymo{background-color:#8fb8f6}
26
- ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
20
  ._bfhk3uhp{background-color:#b3df72}
28
- ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
- ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
- ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
- ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
21
  ._bfhkshej{background-color:#d8a0f7}
33
22
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
23
  ._bfhkxmjf{background-color:#f9c84e}
35
- ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
24
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
25
  ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
26
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
package/dist/esm/compiled/index.js CHANGED
@@ -1,25 +1,12 @@
1
- /* index.tsx generated by @compiled/babel-plugin v0.32.1 */
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
2
  import "./index.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo, useMemo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { UNSAFE_SurfaceContext as SurfaceContext } from '@atlaskit/primitives';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
8
  var stylesOld = {
9
9
  container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
10
- text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
11
- 'bg.bold.default': "_bfhkcdhy",
12
- 'bg.bold.inprogress': "_bfhk14wj",
13
- 'bg.bold.moved': "_bfhk190i",
14
- 'bg.bold.new': "_bfhk1lri",
15
- 'bg.bold.removed': "_bfhkybec",
16
- 'bg.bold.success': "_bfhk8emd",
17
- 'bg.subtle.default': "_bfhkm7j4",
18
- 'bg.subtle.inprogress': "_bfhk33gi",
19
- 'bg.subtle.moved': "_bfhk1tzq",
20
- 'bg.subtle.new': "_bfhk1nvp",
21
- 'bg.subtle.removed': "_bfhk1gly",
22
- 'bg.subtle.success': "_bfhkmv6i",
23
10
  'text.bold.default': "_syaz15cr",
24
11
  'text.bold.inprogress': "_syaz15cr",
25
12
  'text.bold.moved': "_syazal3n",
@@ -33,6 +20,11 @@ var stylesOld = {
33
20
  'text.subtle.removed': "_syaz1ick",
34
21
  'text.subtle.success': "_syaz17fi"
35
22
  };
23
+
24
+ // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
+ var stylesOldUnbounded = {
26
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c"
27
+ };
36
28
  var backgroundColorsOld = {
37
29
  bold: {
38
30
  default: 'color.background.neutral.bold',
@@ -51,6 +43,11 @@ var backgroundColorsOld = {
51
43
  success: 'color.background.success'
52
44
  }
53
45
  };
46
+
47
+ /**
48
+ * TODO: We should be using our bounded `cssMap` here, but most of
49
+ * these styles from the visual refresh are not in the Design System.
50
+ */
54
51
  var stylesNew = {
55
52
  container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
56
53
  text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
@@ -119,15 +116,16 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
119
116
  className: ax([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
120
117
  }, children));
121
118
  }
122
- return /*#__PURE__*/React.createElement(SurfaceContext.Provider, {
123
- value: backgroundColorsOld[appearanceStyle][appearanceType]
124
- }, /*#__PURE__*/React.createElement("span", {
119
+ return /*#__PURE__*/React.createElement(Box, {
120
+ as: "span",
121
+ backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
125
122
  style: {
126
123
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
127
124
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
128
125
  },
129
- "data-testid": testId,
130
- className: ax([stylesOld.container, stylesOld["bg.".concat(appearanceStyle, ".").concat(appearanceType)]])
126
+ paddingInline: "space.050",
127
+ xcss: stylesOld.container,
128
+ testId: testId
131
129
  }, /*#__PURE__*/React.createElement("span", {
132
130
  style: {
133
131
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -135,8 +133,8 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
135
133
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
136
134
  },
137
135
  "data-testid": testId && "".concat(testId, "--text"),
138
- className: ax([stylesOld.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
139
- }, children)));
136
+ className: ax([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
137
+ }, children));
140
138
  });
141
139
  Lozenge.displayName = 'Lozenge';
142
140
  export default Lozenge;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.12.0",
3
+ "version": "11.12.2",
4
4
  "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
41
41
  "@atlaskit/codemod-utils": "^4.2.0",
42
42
  "@atlaskit/css": "^0.6.0",
43
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
44
- "@atlaskit/primitives": "^12.2.0",
44
+ "@atlaskit/primitives": "^13.0.0",
45
45
  "@atlaskit/theme": "^14.0.0",
46
46
  "@atlaskit/tokens": "^2.0.0",
47
47
  "@babel/runtime": "^7.0.0",