@atlaskit/inline-message 11.5.6 → 11.5.8

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/inline-message/index.js +18 -28
  3. package/dist/cjs/components/message-icon/index.js +14 -18
  4. package/dist/cjs/constants.js +2 -4
  5. package/dist/es2019/components/inline-message/index.js +17 -23
  6. package/dist/es2019/components/message-icon/index.js +13 -13
  7. package/dist/esm/components/inline-message/index.js +17 -23
  8. package/dist/esm/components/message-icon/index.js +13 -13
  9. package/dist/types/components/inline-message/index.d.ts +1 -1
  10. package/dist/types-ts4.5/components/inline-message/index.d.ts +1 -1
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 11.5.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#42261](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42261) [`5bbffa62596`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bbffa62596) - Remove shadowed variable and use type imports
8
+
9
+ ## 11.5.7
10
+
11
+ ### Patch Changes
12
+
13
+ - [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
14
+
3
15
  ## 11.5.6
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -12,12 +11,10 @@ var _react = require("react");
12
11
  var _react2 = require("@emotion/react");
13
12
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
14
13
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
15
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
14
+ var _colors = require("@atlaskit/theme/colors");
16
15
  var _components = require("@atlaskit/theme/components");
17
16
  var _constants = require("../../constants");
18
17
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
19
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
18
  /** @jsx jsx */
22
19
 
23
20
  var buttonContentsStyles = (0, _react2.css)({
@@ -32,15 +29,9 @@ var titleStyles = (0, _react2.css)({
32
29
  var textStyles = (0, _react2.css)({
33
30
  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
34
31
  color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
32
+ overflow: 'hidden',
35
33
  textOverflow: 'ellipsis',
36
- whiteSpace: 'nowrap',
37
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
38
- '@supports not (overflow-x: clip)': {
39
- overflow: 'hidden'
40
- },
41
- '@supports (overflow-x: clip)': {
42
- overflowX: 'clip'
43
- }
34
+ whiteSpace: 'nowrap'
44
35
  });
45
36
  var rootStyles = (0, _react2.css)({
46
37
  display: 'inline-block',
@@ -67,33 +58,33 @@ var rootStyles = (0, _react2.css)({
67
58
  }
68
59
  });
69
60
  var titleColor = (0, _components.themed)({
70
- light: "var(--ds-text, ".concat(colors.N600, ")"),
71
- dark: "var(--ds-text, ".concat(colors.DN600, ")")
61
+ light: "var(--ds-text, ".concat(_colors.N600, ")"),
62
+ dark: "var(--ds-text, ".concat(_colors.DN600, ")")
72
63
  });
73
64
  var textColor = (0, _components.themed)({
74
- light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
75
- dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
65
+ light: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
66
+ dark: "var(--ds-text-subtlest, ".concat(_colors.DN100, ")")
76
67
  });
77
68
  var iconColor = (0, _components.themed)('appearance', {
78
69
  connectivity: {
79
- light: "var(--ds-icon-brand, ".concat(colors.B300, ")"),
80
- dark: "var(--ds-icon-brand, ".concat(colors.B75, ")")
70
+ light: "var(--ds-icon-brand, ".concat(_colors.B300, ")"),
71
+ dark: "var(--ds-icon-brand, ".concat(_colors.B75, ")")
81
72
  },
82
73
  confirmation: {
83
- light: "var(--ds-icon-success, ".concat(colors.G200, ")"),
84
- dark: "var(--ds-icon-success, ".concat(colors.G200, ")")
74
+ light: "var(--ds-icon-success, ".concat(_colors.G200, ")"),
75
+ dark: "var(--ds-icon-success, ".concat(_colors.G200, ")")
85
76
  },
86
77
  info: {
87
- light: "var(--ds-icon-discovery, ".concat(colors.P200, ")"),
88
- dark: "var(--ds-icon-discovery, ".concat(colors.P200, ")")
78
+ light: "var(--ds-icon-discovery, ".concat(_colors.P200, ")"),
79
+ dark: "var(--ds-icon-discovery, ".concat(_colors.P200, ")")
89
80
  },
90
81
  warning: {
91
- light: "var(--ds-icon-warning, ".concat(colors.Y200, ")"),
92
- dark: "var(--ds-icon-warning, ".concat(colors.Y200, ")")
82
+ light: "var(--ds-icon-warning, ".concat(_colors.Y200, ")"),
83
+ dark: "var(--ds-icon-warning, ".concat(_colors.Y200, ")")
93
84
  },
94
85
  error: {
95
- light: "var(--ds-icon-danger, ".concat(colors.R300, ")"),
96
- dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
86
+ light: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
87
+ dark: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
97
88
  }
98
89
  });
99
90
 
@@ -193,5 +184,4 @@ var InlineMessage = function InlineMessage(_ref) {
193
184
  "data-testid": testId && "".concat(testId, "--text")
194
185
  }, secondaryText)))));
195
186
  };
196
- var _default = InlineMessage;
197
- exports.default = _default;
187
+ var _default = exports.default = InlineMessage;
package/dist/cjs/components/message-icon/index.js CHANGED
@@ -1,38 +1,35 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
7
  var _react = require("@emotion/react");
9
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
8
+ var _colors = require("@atlaskit/theme/colors");
10
9
  var _components = require("@atlaskit/theme/components");
11
10
  var _constants = require("../../constants");
12
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
11
  /** @jsx jsx */
15
12
 
16
13
  var iconColor = (0, _components.themed)('appearance', {
17
14
  connectivity: {
18
- light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
19
- dark: "var(--ds-icon-brand, ".concat(colors.B100, ")")
15
+ light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
16
+ dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
20
17
  },
21
18
  confirmation: {
22
- light: "var(--ds-icon-success, ".concat(colors.G300, ")"),
23
- dark: "var(--ds-icon-success, ".concat(colors.G300, ")")
19
+ light: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
20
+ dark: "var(--ds-icon-success, ".concat(_colors.G300, ")")
24
21
  },
25
22
  info: {
26
- light: "var(--ds-icon-discovery, ".concat(colors.P300, ")"),
27
- dark: "var(--ds-icon-discovery, ".concat(colors.P300, ")")
23
+ light: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
24
+ dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
28
25
  },
29
26
  warning: {
30
- light: "var(--ds-icon-warning, ".concat(colors.Y300, ")"),
31
- dark: "var(--ds-icon-warning, ".concat(colors.Y300, ")")
27
+ light: "var(--ds-icon-warning, ".concat(_colors.Y300, ")"),
28
+ dark: "var(--ds-icon-warning, ".concat(_colors.Y300, ")")
32
29
  },
33
30
  error: {
34
- light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
35
- dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
31
+ light: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
32
+ dark: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
36
33
  }
37
34
  });
38
35
  var iconWrapperStyles = (0, _react.css)({
@@ -56,7 +53,7 @@ var SelectedIcon = function SelectedIcon(_ref) {
56
53
  isOpen = _ref.isOpen,
57
54
  label = _ref.label;
58
55
  var _typesMapping$appeara = _constants.typesMapping[appearance],
59
- SelectedIcon = _typesMapping$appeara.icon,
56
+ Icon = _typesMapping$appeara.icon,
60
57
  defaultLabel = _typesMapping$appeara.defaultLabel;
61
58
  var theme = (0, _components.useGlobalTheme)();
62
59
  return (0, _react.jsx)("span", {
@@ -68,11 +65,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
68
65
  })
69
66
  },
70
67
  css: [iconWrapperStyles, isOpen && iconColorStyles]
71
- }, (0, _react.jsx)(SelectedIcon, {
68
+ }, (0, _react.jsx)(Icon, {
72
69
  testId: "inline-message-icon",
73
70
  label: label || defaultLabel,
74
71
  size: "medium"
75
72
  }));
76
73
  };
77
- var _default = SelectedIcon;
78
- exports.default = _default;
74
+ var _default = exports.default = SelectedIcon;
package/dist/cjs/constants.js CHANGED
@@ -9,7 +9,7 @@ var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-ci
9
9
  var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
10
10
  var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
11
11
  var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
12
- var typesMapping = {
12
+ var typesMapping = exports.typesMapping = {
13
13
  connectivity: {
14
14
  icon: _warning.default,
15
15
  defaultLabel: 'connectivity inline message'
@@ -31,6 +31,4 @@ var typesMapping = {
31
31
  defaultLabel: 'error inline message'
32
32
  }
33
33
  };
34
- exports.typesMapping = typesMapping;
35
- var VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
36
- exports.VAR_SECONDARY_TEXT_COLOR = VAR_SECONDARY_TEXT_COLOR;
34
+ var VAR_SECONDARY_TEXT_COLOR = exports.VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -3,7 +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 * as colors from '@atlaskit/theme/colors';
6
+ import { B300, B75, DN100, DN600, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
7
7
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
8
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
9
9
  import MessageIcon from '../message-icon';
@@ -19,15 +19,9 @@ const titleStyles = css({
19
19
  const textStyles = css({
20
20
  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
21
21
  color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
22
+ overflow: 'hidden',
22
23
  textOverflow: 'ellipsis',
23
- whiteSpace: 'nowrap',
24
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
25
- '@supports not (overflow-x: clip)': {
26
- overflow: 'hidden'
27
- },
28
- '@supports (overflow-x: clip)': {
29
- overflowX: 'clip'
30
- }
24
+ whiteSpace: 'nowrap'
31
25
  });
32
26
  const rootStyles = css({
33
27
  display: 'inline-block',
@@ -54,33 +48,33 @@ const rootStyles = css({
54
48
  }
55
49
  });
56
50
  const titleColor = themed({
57
- light: `var(--ds-text, ${colors.N600})`,
58
- dark: `var(--ds-text, ${colors.DN600})`
51
+ light: `var(--ds-text, ${N600})`,
52
+ dark: `var(--ds-text, ${DN600})`
59
53
  });
60
54
  const textColor = themed({
61
- light: `var(--ds-text-subtlest, ${colors.N300})`,
62
- dark: `var(--ds-text-subtlest, ${colors.DN100})`
55
+ light: `var(--ds-text-subtlest, ${N300})`,
56
+ dark: `var(--ds-text-subtlest, ${DN100})`
63
57
  });
64
58
  const iconColor = themed('appearance', {
65
59
  connectivity: {
66
- light: `var(--ds-icon-brand, ${colors.B300})`,
67
- dark: `var(--ds-icon-brand, ${colors.B75})`
60
+ light: `var(--ds-icon-brand, ${B300})`,
61
+ dark: `var(--ds-icon-brand, ${B75})`
68
62
  },
69
63
  confirmation: {
70
- light: `var(--ds-icon-success, ${colors.G200})`,
71
- dark: `var(--ds-icon-success, ${colors.G200})`
64
+ light: `var(--ds-icon-success, ${G200})`,
65
+ dark: `var(--ds-icon-success, ${G200})`
72
66
  },
73
67
  info: {
74
- light: `var(--ds-icon-discovery, ${colors.P200})`,
75
- dark: `var(--ds-icon-discovery, ${colors.P200})`
68
+ light: `var(--ds-icon-discovery, ${P200})`,
69
+ dark: `var(--ds-icon-discovery, ${P200})`
76
70
  },
77
71
  warning: {
78
- light: `var(--ds-icon-warning, ${colors.Y200})`,
79
- dark: `var(--ds-icon-warning, ${colors.Y200})`
72
+ light: `var(--ds-icon-warning, ${Y200})`,
73
+ dark: `var(--ds-icon-warning, ${Y200})`
80
74
  },
81
75
  error: {
82
- light: `var(--ds-icon-danger, ${colors.R300})`,
83
- dark: `var(--ds-icon-danger, ${colors.R300})`
76
+ light: `var(--ds-icon-danger, ${R300})`,
77
+ dark: `var(--ds-icon-danger, ${R300})`
84
78
  }
85
79
  });
86
80
 
package/dist/es2019/components/message-icon/index.js CHANGED
@@ -1,29 +1,29 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import * as colors from '@atlaskit/theme/colors';
4
+ import { B100, B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
5
5
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
6
6
  import { typesMapping } from '../../constants';
7
7
  const iconColor = themed('appearance', {
8
8
  connectivity: {
9
- light: `var(--ds-icon-brand, ${colors.B400})`,
10
- dark: `var(--ds-icon-brand, ${colors.B100})`
9
+ light: `var(--ds-icon-brand, ${B400})`,
10
+ dark: `var(--ds-icon-brand, ${B100})`
11
11
  },
12
12
  confirmation: {
13
- light: `var(--ds-icon-success, ${colors.G300})`,
14
- dark: `var(--ds-icon-success, ${colors.G300})`
13
+ light: `var(--ds-icon-success, ${G300})`,
14
+ dark: `var(--ds-icon-success, ${G300})`
15
15
  },
16
16
  info: {
17
- light: `var(--ds-icon-discovery, ${colors.P300})`,
18
- dark: `var(--ds-icon-discovery, ${colors.P300})`
17
+ light: `var(--ds-icon-discovery, ${P300})`,
18
+ dark: `var(--ds-icon-discovery, ${P300})`
19
19
  },
20
20
  warning: {
21
- light: `var(--ds-icon-warning, ${colors.Y300})`,
22
- dark: `var(--ds-icon-warning, ${colors.Y300})`
21
+ light: `var(--ds-icon-warning, ${Y300})`,
22
+ dark: `var(--ds-icon-warning, ${Y300})`
23
23
  },
24
24
  error: {
25
- light: `var(--ds-icon-danger, ${colors.R400})`,
26
- dark: `var(--ds-icon-danger, ${colors.R400})`
25
+ light: `var(--ds-icon-danger, ${R400})`,
26
+ dark: `var(--ds-icon-danger, ${R400})`
27
27
  }
28
28
  });
29
29
  const iconWrapperStyles = css({
@@ -49,7 +49,7 @@ const SelectedIcon = ({
49
49
  }) => {
50
50
  const {
51
51
  [appearance]: {
52
- icon: SelectedIcon,
52
+ icon: Icon,
53
53
  defaultLabel
54
54
  }
55
55
  } = typesMapping;
@@ -63,7 +63,7 @@ const SelectedIcon = ({
63
63
  })
64
64
  },
65
65
  css: [iconWrapperStyles, isOpen && iconColorStyles]
66
- }, jsx(SelectedIcon, {
66
+ }, jsx(Icon, {
67
67
  testId: "inline-message-icon",
68
68
  label: label || defaultLabel,
69
69
  size: "medium"
package/dist/esm/components/inline-message/index.js CHANGED
@@ -5,7 +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 * as colors from '@atlaskit/theme/colors';
8
+ import { B300, B75, DN100, DN600, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
9
9
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
10
10
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
11
11
  import MessageIcon from '../message-icon';
@@ -21,15 +21,9 @@ var titleStyles = css({
21
21
  var textStyles = css({
22
22
  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
23
23
  color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
24
+ overflow: 'hidden',
24
25
  textOverflow: 'ellipsis',
25
- whiteSpace: 'nowrap',
26
- // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
27
- '@supports not (overflow-x: clip)': {
28
- overflow: 'hidden'
29
- },
30
- '@supports (overflow-x: clip)': {
31
- overflowX: 'clip'
32
- }
26
+ whiteSpace: 'nowrap'
33
27
  });
34
28
  var rootStyles = css({
35
29
  display: 'inline-block',
@@ -56,33 +50,33 @@ var rootStyles = css({
56
50
  }
57
51
  });
58
52
  var titleColor = themed({
59
- light: "var(--ds-text, ".concat(colors.N600, ")"),
60
- dark: "var(--ds-text, ".concat(colors.DN600, ")")
53
+ light: "var(--ds-text, ".concat(N600, ")"),
54
+ dark: "var(--ds-text, ".concat(DN600, ")")
61
55
  });
62
56
  var textColor = themed({
63
- light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
64
- dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
57
+ light: "var(--ds-text-subtlest, ".concat(N300, ")"),
58
+ dark: "var(--ds-text-subtlest, ".concat(DN100, ")")
65
59
  });
66
60
  var iconColor = themed('appearance', {
67
61
  connectivity: {
68
- light: "var(--ds-icon-brand, ".concat(colors.B300, ")"),
69
- dark: "var(--ds-icon-brand, ".concat(colors.B75, ")")
62
+ light: "var(--ds-icon-brand, ".concat(B300, ")"),
63
+ dark: "var(--ds-icon-brand, ".concat(B75, ")")
70
64
  },
71
65
  confirmation: {
72
- light: "var(--ds-icon-success, ".concat(colors.G200, ")"),
73
- dark: "var(--ds-icon-success, ".concat(colors.G200, ")")
66
+ light: "var(--ds-icon-success, ".concat(G200, ")"),
67
+ dark: "var(--ds-icon-success, ".concat(G200, ")")
74
68
  },
75
69
  info: {
76
- light: "var(--ds-icon-discovery, ".concat(colors.P200, ")"),
77
- dark: "var(--ds-icon-discovery, ".concat(colors.P200, ")")
70
+ light: "var(--ds-icon-discovery, ".concat(P200, ")"),
71
+ dark: "var(--ds-icon-discovery, ".concat(P200, ")")
78
72
  },
79
73
  warning: {
80
- light: "var(--ds-icon-warning, ".concat(colors.Y200, ")"),
81
- dark: "var(--ds-icon-warning, ".concat(colors.Y200, ")")
74
+ light: "var(--ds-icon-warning, ".concat(Y200, ")"),
75
+ dark: "var(--ds-icon-warning, ".concat(Y200, ")")
82
76
  },
83
77
  error: {
84
- light: "var(--ds-icon-danger, ".concat(colors.R300, ")"),
85
- dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
78
+ light: "var(--ds-icon-danger, ".concat(R300, ")"),
79
+ dark: "var(--ds-icon-danger, ".concat(R300, ")")
86
80
  }
87
81
  });
88
82
 
package/dist/esm/components/message-icon/index.js CHANGED
@@ -1,29 +1,29 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import * as colors from '@atlaskit/theme/colors';
4
+ import { B100, B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
5
5
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
6
6
  import { typesMapping } from '../../constants';
7
7
  var iconColor = themed('appearance', {
8
8
  connectivity: {
9
- light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
10
- dark: "var(--ds-icon-brand, ".concat(colors.B100, ")")
9
+ light: "var(--ds-icon-brand, ".concat(B400, ")"),
10
+ dark: "var(--ds-icon-brand, ".concat(B100, ")")
11
11
  },
12
12
  confirmation: {
13
- light: "var(--ds-icon-success, ".concat(colors.G300, ")"),
14
- dark: "var(--ds-icon-success, ".concat(colors.G300, ")")
13
+ light: "var(--ds-icon-success, ".concat(G300, ")"),
14
+ dark: "var(--ds-icon-success, ".concat(G300, ")")
15
15
  },
16
16
  info: {
17
- light: "var(--ds-icon-discovery, ".concat(colors.P300, ")"),
18
- dark: "var(--ds-icon-discovery, ".concat(colors.P300, ")")
17
+ light: "var(--ds-icon-discovery, ".concat(P300, ")"),
18
+ dark: "var(--ds-icon-discovery, ".concat(P300, ")")
19
19
  },
20
20
  warning: {
21
- light: "var(--ds-icon-warning, ".concat(colors.Y300, ")"),
22
- dark: "var(--ds-icon-warning, ".concat(colors.Y300, ")")
21
+ light: "var(--ds-icon-warning, ".concat(Y300, ")"),
22
+ dark: "var(--ds-icon-warning, ".concat(Y300, ")")
23
23
  },
24
24
  error: {
25
- light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
26
- dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
25
+ light: "var(--ds-icon-danger, ".concat(R400, ")"),
26
+ dark: "var(--ds-icon-danger, ".concat(R400, ")")
27
27
  }
28
28
  });
29
29
  var iconWrapperStyles = css({
@@ -47,7 +47,7 @@ var SelectedIcon = function SelectedIcon(_ref) {
47
47
  isOpen = _ref.isOpen,
48
48
  label = _ref.label;
49
49
  var _typesMapping$appeara = typesMapping[appearance],
50
- SelectedIcon = _typesMapping$appeara.icon,
50
+ Icon = _typesMapping$appeara.icon,
51
51
  defaultLabel = _typesMapping$appeara.defaultLabel;
52
52
  var theme = useGlobalTheme();
53
53
  return jsx("span", {
@@ -59,7 +59,7 @@ var SelectedIcon = function SelectedIcon(_ref) {
59
59
  })
60
60
  },
61
61
  css: [iconWrapperStyles, isOpen && iconColorStyles]
62
- }, jsx(SelectedIcon, {
62
+ }, jsx(Icon, {
63
63
  testId: "inline-message-icon",
64
64
  label: label || defaultLabel,
65
65
  size: "medium"
package/dist/types/components/inline-message/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  import type { IconAppearance, InlineDialogPlacement } from '../../types';
4
4
  interface InlineMessageProps {
5
5
  /**
package/dist/types-ts4.5/components/inline-message/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  import type { IconAppearance, InlineDialogPlacement } from '../../types';
4
4
  interface InlineMessageProps {
5
5
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.5.6",
3
+ "version": "11.5.8",
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,11 +24,11 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^16.10.0",
27
+ "@atlaskit/button": "^16.11.0",
28
28
  "@atlaskit/icon": "^21.12.0",
29
29
  "@atlaskit/inline-dialog": "^13.6.0",
30
30
  "@atlaskit/theme": "^12.6.0",
31
- "@atlaskit/tokens": "^1.25.0",
31
+ "@atlaskit/tokens": "^1.28.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/react": "^11.7.1"
34
34
  },