@atlaskit/inline-message 11.5.8 → 12.0.1

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 +16 -0
  2. package/dist/cjs/components/inline-message/index.js +16 -41
  3. package/dist/cjs/components/message-icon/index.js +14 -27
  4. package/dist/es2019/components/inline-message/index.js +17 -42
  5. package/dist/es2019/components/message-icon/index.js +15 -28
  6. package/dist/esm/components/inline-message/index.js +17 -42
  7. package/dist/esm/components/message-icon/index.js +15 -28
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 12.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - [#41791](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41791) [`ec7c2a38247`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec7c2a38247) - Removed all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and InlineMessage components.
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 11.5.8
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
12
12
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
13
13
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
14
14
  var _colors = require("@atlaskit/theme/colors");
15
- var _components = require("@atlaskit/theme/components");
16
15
  var _constants = require("../../constants");
17
16
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
18
17
  /** @jsx jsx */
@@ -57,36 +56,20 @@ var rootStyles = (0, _react2.css)({
57
56
  }
58
57
  }
59
58
  });
60
- var titleColor = (0, _components.themed)({
61
- light: "var(--ds-text, ".concat(_colors.N600, ")"),
62
- dark: "var(--ds-text, ".concat(_colors.DN600, ")")
63
- });
64
- var textColor = (0, _components.themed)({
65
- light: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
66
- dark: "var(--ds-text-subtlest, ".concat(_colors.DN100, ")")
67
- });
68
- var iconColor = (0, _components.themed)('appearance', {
69
- connectivity: {
70
- light: "var(--ds-icon-brand, ".concat(_colors.B300, ")"),
71
- dark: "var(--ds-icon-brand, ".concat(_colors.B75, ")")
72
- },
73
- confirmation: {
74
- light: "var(--ds-icon-success, ".concat(_colors.G200, ")"),
75
- dark: "var(--ds-icon-success, ".concat(_colors.G200, ")")
76
- },
77
- info: {
78
- light: "var(--ds-icon-discovery, ".concat(_colors.P200, ")"),
79
- dark: "var(--ds-icon-discovery, ".concat(_colors.P200, ")")
80
- },
81
- warning: {
82
- light: "var(--ds-icon-warning, ".concat(_colors.Y200, ")"),
83
- dark: "var(--ds-icon-warning, ".concat(_colors.Y200, ")")
84
- },
85
- error: {
86
- light: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
87
- dark: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
59
+ var iconColor = function iconColor(appearance) {
60
+ switch (appearance) {
61
+ case 'connectivity':
62
+ return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
63
+ case 'confirmation':
64
+ return "var(--ds-icon-success, ".concat(_colors.G200, ")");
65
+ case 'info':
66
+ return "var(--ds-icon-discovery, ".concat(_colors.P200, ")");
67
+ case 'warning':
68
+ return "var(--ds-icon-warning, ".concat(_colors.Y200, ")");
69
+ case 'error':
70
+ return "var(--ds-icon-danger, ".concat(_colors.R300, ")");
88
71
  }
89
- });
72
+ };
90
73
 
91
74
  /**
92
75
  * __Inline message__
@@ -135,17 +118,13 @@ var InlineMessage = function InlineMessage(_ref) {
135
118
  var onCloseDialog = (0, _react.useCallback)(function () {
136
119
  return setIsOpen(false);
137
120
  }, [setIsOpen]);
138
- var theme = (0, _components.useGlobalTheme)();
139
121
  if (!appearance) {
140
122
  appearance = type;
141
123
  }
142
124
  return (0, _react2.jsx)("div", {
143
125
  css: rootStyles,
144
126
  style: {
145
- '--icon-accent-color': iconColor({
146
- appearance: appearance,
147
- theme: theme
148
- })
127
+ '--icon-accent-color': iconColor(appearance)
149
128
  },
150
129
  "data-testid": testId
151
130
  }, (0, _react2.jsx)(_inlineDialog.default, {
@@ -169,17 +148,13 @@ var InlineMessage = function InlineMessage(_ref) {
169
148
  label: iconLabel
170
149
  }), title && (0, _react2.jsx)("span", {
171
150
  style: {
172
- color: titleColor({
173
- theme: theme
174
- })
151
+ color: "var(--ds-text, ".concat(_colors.N600, ")")
175
152
  },
176
153
  css: titleStyles,
177
154
  "data-testid": testId && "".concat(testId, "--title")
178
155
  }, title), secondaryText && (0, _react2.jsx)("span", {
179
156
  "data-ds--inline-message--secondary-text": true,
180
- style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, textColor({
181
- theme: theme
182
- })),
157
+ style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
183
158
  css: textStyles,
184
159
  "data-testid": testId && "".concat(testId, "--text")
185
160
  }, secondaryText)))));
package/dist/cjs/components/message-icon/index.js CHANGED
@@ -6,32 +6,23 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  var _colors = require("@atlaskit/theme/colors");
9
- var _components = require("@atlaskit/theme/components");
10
9
  var _constants = require("../../constants");
11
10
  /** @jsx jsx */
12
11
 
13
- var iconColor = (0, _components.themed)('appearance', {
14
- connectivity: {
15
- light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
16
- dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
17
- },
18
- confirmation: {
19
- light: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
20
- dark: "var(--ds-icon-success, ".concat(_colors.G300, ")")
21
- },
22
- info: {
23
- light: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
24
- dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
25
- },
26
- warning: {
27
- light: "var(--ds-icon-warning, ".concat(_colors.Y300, ")"),
28
- dark: "var(--ds-icon-warning, ".concat(_colors.Y300, ")")
29
- },
30
- error: {
31
- light: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
32
- dark: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
12
+ var iconColor = function iconColor(appearance) {
13
+ switch (appearance) {
14
+ case 'connectivity':
15
+ return "var(--ds-icon-brand, ".concat(_colors.B400, ")");
16
+ case 'confirmation':
17
+ return "var(--ds-icon-success, ".concat(_colors.G300, ")");
18
+ case 'info':
19
+ return "var(--ds-icon-discovery, ".concat(_colors.P300, ")");
20
+ case 'warning':
21
+ return "var(--ds-icon-warning, ".concat(_colors.Y300, ")");
22
+ case 'error':
23
+ return "var(--ds-icon-danger, ".concat(_colors.R400, ")");
33
24
  }
34
- });
25
+ };
35
26
  var iconWrapperStyles = (0, _react.css)({
36
27
  display: 'flex',
37
28
  alignItems: 'center',
@@ -55,14 +46,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
55
46
  var _typesMapping$appeara = _constants.typesMapping[appearance],
56
47
  Icon = _typesMapping$appeara.icon,
57
48
  defaultLabel = _typesMapping$appeara.defaultLabel;
58
- var theme = (0, _components.useGlobalTheme)();
59
49
  return (0, _react.jsx)("span", {
60
50
  "data-ds--inline-message--icon": true,
61
51
  style: {
62
- '--icon-color': iconColor({
63
- appearance: appearance,
64
- theme: theme
65
- })
52
+ '--icon-color': iconColor(appearance)
66
53
  },
67
54
  css: [iconWrapperStyles, isOpen && iconColorStyles]
68
55
  }, (0, _react.jsx)(Icon, {
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -3,8 +3,7 @@ import { useCallback, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import Button from '@atlaskit/button/custom-theme-button';
5
5
  import InlineDialog from '@atlaskit/inline-dialog';
6
- import { B300, B75, DN100, DN600, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
7
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
6
+ import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
8
7
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
9
8
  import MessageIcon from '../message-icon';
10
9
  const buttonContentsStyles = css({
@@ -47,36 +46,20 @@ const rootStyles = css({
47
46
  }
48
47
  }
49
48
  });
50
- const titleColor = themed({
51
- light: `var(--ds-text, ${N600})`,
52
- dark: `var(--ds-text, ${DN600})`
53
- });
54
- const textColor = themed({
55
- light: `var(--ds-text-subtlest, ${N300})`,
56
- dark: `var(--ds-text-subtlest, ${DN100})`
57
- });
58
- const iconColor = themed('appearance', {
59
- connectivity: {
60
- light: `var(--ds-icon-brand, ${B300})`,
61
- dark: `var(--ds-icon-brand, ${B75})`
62
- },
63
- confirmation: {
64
- light: `var(--ds-icon-success, ${G200})`,
65
- dark: `var(--ds-icon-success, ${G200})`
66
- },
67
- info: {
68
- light: `var(--ds-icon-discovery, ${P200})`,
69
- dark: `var(--ds-icon-discovery, ${P200})`
70
- },
71
- warning: {
72
- light: `var(--ds-icon-warning, ${Y200})`,
73
- dark: `var(--ds-icon-warning, ${Y200})`
74
- },
75
- error: {
76
- light: `var(--ds-icon-danger, ${R300})`,
77
- dark: `var(--ds-icon-danger, ${R300})`
49
+ const iconColor = appearance => {
50
+ switch (appearance) {
51
+ case 'connectivity':
52
+ return `var(--ds-icon-brand, ${B300})`;
53
+ case 'confirmation':
54
+ return `var(--ds-icon-success, ${G200})`;
55
+ case 'info':
56
+ return `var(--ds-icon-discovery, ${P200})`;
57
+ case 'warning':
58
+ return `var(--ds-icon-warning, ${Y200})`;
59
+ case 'error':
60
+ return `var(--ds-icon-danger, ${R300})`;
78
61
  }
79
- });
62
+ };
80
63
 
81
64
  /**
82
65
  * __Inline message__
@@ -115,17 +98,13 @@ const InlineMessage = ({
115
98
  setIsOpen(oldState => !oldState);
116
99
  }, [setIsOpen]);
117
100
  const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
118
- const theme = useGlobalTheme();
119
101
  if (!appearance) {
120
102
  appearance = type;
121
103
  }
122
104
  return jsx("div", {
123
105
  css: rootStyles,
124
106
  style: {
125
- '--icon-accent-color': iconColor({
126
- appearance: appearance,
127
- theme
128
- })
107
+ '--icon-accent-color': iconColor(appearance)
129
108
  },
130
109
  "data-testid": testId
131
110
  }, jsx(InlineDialog, {
@@ -149,18 +128,14 @@ const InlineMessage = ({
149
128
  label: iconLabel
150
129
  }), title && jsx("span", {
151
130
  style: {
152
- color: titleColor({
153
- theme
154
- })
131
+ color: `var(--ds-text, ${N600})`
155
132
  },
156
133
  css: titleStyles,
157
134
  "data-testid": testId && `${testId}--title`
158
135
  }, title), secondaryText && jsx("span", {
159
136
  "data-ds--inline-message--secondary-text": true,
160
137
  style: {
161
- [VAR_SECONDARY_TEXT_COLOR]: textColor({
162
- theme
163
- })
138
+ [VAR_SECONDARY_TEXT_COLOR]: `var(--ds-text-subtlest, ${N300})`
164
139
  },
165
140
  css: textStyles,
166
141
  "data-testid": testId && `${testId}--text`
package/dist/es2019/components/message-icon/index.js CHANGED
@@ -1,31 +1,22 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import { B100, B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
5
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
4
+ import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
6
5
  import { typesMapping } from '../../constants';
7
- const iconColor = themed('appearance', {
8
- connectivity: {
9
- light: `var(--ds-icon-brand, ${B400})`,
10
- dark: `var(--ds-icon-brand, ${B100})`
11
- },
12
- confirmation: {
13
- light: `var(--ds-icon-success, ${G300})`,
14
- dark: `var(--ds-icon-success, ${G300})`
15
- },
16
- info: {
17
- light: `var(--ds-icon-discovery, ${P300})`,
18
- dark: `var(--ds-icon-discovery, ${P300})`
19
- },
20
- warning: {
21
- light: `var(--ds-icon-warning, ${Y300})`,
22
- dark: `var(--ds-icon-warning, ${Y300})`
23
- },
24
- error: {
25
- light: `var(--ds-icon-danger, ${R400})`,
26
- dark: `var(--ds-icon-danger, ${R400})`
6
+ const iconColor = appearance => {
7
+ switch (appearance) {
8
+ case 'connectivity':
9
+ return `var(--ds-icon-brand, ${B400})`;
10
+ case 'confirmation':
11
+ return `var(--ds-icon-success, ${G300})`;
12
+ case 'info':
13
+ return `var(--ds-icon-discovery, ${P300})`;
14
+ case 'warning':
15
+ return `var(--ds-icon-warning, ${Y300})`;
16
+ case 'error':
17
+ return `var(--ds-icon-danger, ${R400})`;
27
18
  }
28
- });
19
+ };
29
20
  const iconWrapperStyles = css({
30
21
  display: 'flex',
31
22
  alignItems: 'center',
@@ -53,14 +44,10 @@ const SelectedIcon = ({
53
44
  defaultLabel
54
45
  }
55
46
  } = typesMapping;
56
- const theme = useGlobalTheme();
57
47
  return jsx("span", {
58
48
  "data-ds--inline-message--icon": true,
59
49
  style: {
60
- '--icon-color': iconColor({
61
- appearance,
62
- theme
63
- })
50
+ '--icon-color': iconColor(appearance)
64
51
  },
65
52
  css: [iconWrapperStyles, isOpen && iconColorStyles]
66
53
  }, jsx(Icon, {
package/dist/esm/components/inline-message/index.js CHANGED
@@ -5,8 +5,7 @@ import { useCallback, useState } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import Button from '@atlaskit/button/custom-theme-button';
7
7
  import InlineDialog from '@atlaskit/inline-dialog';
8
- import { B300, B75, DN100, DN600, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
9
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
+ import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
10
9
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
11
10
  import MessageIcon from '../message-icon';
12
11
  var buttonContentsStyles = css({
@@ -49,36 +48,20 @@ var rootStyles = css({
49
48
  }
50
49
  }
51
50
  });
52
- var titleColor = themed({
53
- light: "var(--ds-text, ".concat(N600, ")"),
54
- dark: "var(--ds-text, ".concat(DN600, ")")
55
- });
56
- var textColor = themed({
57
- light: "var(--ds-text-subtlest, ".concat(N300, ")"),
58
- dark: "var(--ds-text-subtlest, ".concat(DN100, ")")
59
- });
60
- var iconColor = themed('appearance', {
61
- connectivity: {
62
- light: "var(--ds-icon-brand, ".concat(B300, ")"),
63
- dark: "var(--ds-icon-brand, ".concat(B75, ")")
64
- },
65
- confirmation: {
66
- light: "var(--ds-icon-success, ".concat(G200, ")"),
67
- dark: "var(--ds-icon-success, ".concat(G200, ")")
68
- },
69
- info: {
70
- light: "var(--ds-icon-discovery, ".concat(P200, ")"),
71
- dark: "var(--ds-icon-discovery, ".concat(P200, ")")
72
- },
73
- warning: {
74
- light: "var(--ds-icon-warning, ".concat(Y200, ")"),
75
- dark: "var(--ds-icon-warning, ".concat(Y200, ")")
76
- },
77
- error: {
78
- light: "var(--ds-icon-danger, ".concat(R300, ")"),
79
- dark: "var(--ds-icon-danger, ".concat(R300, ")")
51
+ var iconColor = function iconColor(appearance) {
52
+ switch (appearance) {
53
+ case 'connectivity':
54
+ return "var(--ds-icon-brand, ".concat(B300, ")");
55
+ case 'confirmation':
56
+ return "var(--ds-icon-success, ".concat(G200, ")");
57
+ case 'info':
58
+ return "var(--ds-icon-discovery, ".concat(P200, ")");
59
+ case 'warning':
60
+ return "var(--ds-icon-warning, ".concat(Y200, ")");
61
+ case 'error':
62
+ return "var(--ds-icon-danger, ".concat(R300, ")");
80
63
  }
81
- });
64
+ };
82
65
 
83
66
  /**
84
67
  * __Inline message__
@@ -127,17 +110,13 @@ var InlineMessage = function InlineMessage(_ref) {
127
110
  var onCloseDialog = useCallback(function () {
128
111
  return setIsOpen(false);
129
112
  }, [setIsOpen]);
130
- var theme = useGlobalTheme();
131
113
  if (!appearance) {
132
114
  appearance = type;
133
115
  }
134
116
  return jsx("div", {
135
117
  css: rootStyles,
136
118
  style: {
137
- '--icon-accent-color': iconColor({
138
- appearance: appearance,
139
- theme: theme
140
- })
119
+ '--icon-accent-color': iconColor(appearance)
141
120
  },
142
121
  "data-testid": testId
143
122
  }, jsx(InlineDialog, {
@@ -161,17 +140,13 @@ var InlineMessage = function InlineMessage(_ref) {
161
140
  label: iconLabel
162
141
  }), title && jsx("span", {
163
142
  style: {
164
- color: titleColor({
165
- theme: theme
166
- })
143
+ color: "var(--ds-text, ".concat(N600, ")")
167
144
  },
168
145
  css: titleStyles,
169
146
  "data-testid": testId && "".concat(testId, "--title")
170
147
  }, title), secondaryText && jsx("span", {
171
148
  "data-ds--inline-message--secondary-text": true,
172
- style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, textColor({
173
- theme: theme
174
- })),
149
+ style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(N300, ")")),
175
150
  css: textStyles,
176
151
  "data-testid": testId && "".concat(testId, "--text")
177
152
  }, secondaryText)))));
package/dist/esm/components/message-icon/index.js CHANGED
@@ -1,31 +1,22 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import { B100, B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
5
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
4
+ import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
6
5
  import { typesMapping } from '../../constants';
7
- var iconColor = themed('appearance', {
8
- connectivity: {
9
- light: "var(--ds-icon-brand, ".concat(B400, ")"),
10
- dark: "var(--ds-icon-brand, ".concat(B100, ")")
11
- },
12
- confirmation: {
13
- light: "var(--ds-icon-success, ".concat(G300, ")"),
14
- dark: "var(--ds-icon-success, ".concat(G300, ")")
15
- },
16
- info: {
17
- light: "var(--ds-icon-discovery, ".concat(P300, ")"),
18
- dark: "var(--ds-icon-discovery, ".concat(P300, ")")
19
- },
20
- warning: {
21
- light: "var(--ds-icon-warning, ".concat(Y300, ")"),
22
- dark: "var(--ds-icon-warning, ".concat(Y300, ")")
23
- },
24
- error: {
25
- light: "var(--ds-icon-danger, ".concat(R400, ")"),
26
- dark: "var(--ds-icon-danger, ".concat(R400, ")")
6
+ var iconColor = function iconColor(appearance) {
7
+ switch (appearance) {
8
+ case 'connectivity':
9
+ return "var(--ds-icon-brand, ".concat(B400, ")");
10
+ case 'confirmation':
11
+ return "var(--ds-icon-success, ".concat(G300, ")");
12
+ case 'info':
13
+ return "var(--ds-icon-discovery, ".concat(P300, ")");
14
+ case 'warning':
15
+ return "var(--ds-icon-warning, ".concat(Y300, ")");
16
+ case 'error':
17
+ return "var(--ds-icon-danger, ".concat(R400, ")");
27
18
  }
28
- });
19
+ };
29
20
  var iconWrapperStyles = css({
30
21
  display: 'flex',
31
22
  alignItems: 'center',
@@ -49,14 +40,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
49
40
  var _typesMapping$appeara = typesMapping[appearance],
50
41
  Icon = _typesMapping$appeara.icon,
51
42
  defaultLabel = _typesMapping$appeara.defaultLabel;
52
- var theme = useGlobalTheme();
53
43
  return jsx("span", {
54
44
  "data-ds--inline-message--icon": true,
55
45
  style: {
56
- '--icon-color': iconColor({
57
- appearance: appearance,
58
- theme: theme
59
- })
46
+ '--icon-color': iconColor(appearance)
60
47
  },
61
48
  css: [iconWrapperStyles, isOpen && iconColorStyles]
62
49
  }, jsx(Icon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.5.8",
3
+ "version": "12.0.1",
4
4
  "description": "An inline message lets users know when important information is available or when an action is required.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,9 +24,9 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^16.11.0",
28
- "@atlaskit/icon": "^21.12.0",
29
- "@atlaskit/inline-dialog": "^13.6.0",
27
+ "@atlaskit/button": "^16.16.0",
28
+ "@atlaskit/icon": "^22.0.0",
29
+ "@atlaskit/inline-dialog": "^14.0.0",
30
30
  "@atlaskit/theme": "^12.6.0",
31
31
  "@atlaskit/tokens": "^1.28.0",
32
32
  "@babel/runtime": "^7.0.0",