@atlaskit/select 15.2.6 → 15.2.9

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 (20) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/PopupSelect/PopupSelect.js +1 -1
  3. package/dist/cjs/PopupSelect/components.js +5 -14
  4. package/dist/cjs/Select.js +1 -1
  5. package/dist/cjs/components/input-options.js +25 -25
  6. package/dist/cjs/styles.js +32 -32
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/PopupSelect/PopupSelect.js +1 -1
  9. package/dist/es2019/PopupSelect/components.js +4 -14
  10. package/dist/es2019/Select.js +1 -1
  11. package/dist/es2019/components/input-options.js +25 -25
  12. package/dist/es2019/styles.js +32 -32
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/PopupSelect/PopupSelect.js +1 -1
  15. package/dist/esm/PopupSelect/components.js +4 -14
  16. package/dist/esm/Select.js +1 -1
  17. package/dist/esm/components/input-options.js +25 -25
  18. package/dist/esm/styles.js +32 -32
  19. package/dist/esm/version.json +1 -1
  20. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 15.2.9
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 15.2.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [`b2c25c19e38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2c25c19e38) - PopupSelect now uses `@atlaskit/visually-hidden` under the hood.
14
+ - Updated dependencies
15
+
16
+ ## 15.2.7
17
+
18
+ ### Patch Changes
19
+
20
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
21
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
22
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump react-fast-compare to latest version (3.2.0)
23
+ - Updated dependencies
24
+
3
25
  ## 15.2.6
4
26
 
5
27
  ### Patch Changes
package/dist/cjs/PopupSelect/PopupSelect.js CHANGED
@@ -119,7 +119,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
119
119
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
120
120
  groupHeading: function groupHeading(provided) {
121
121
  return _objectSpread(_objectSpread({}, provided), {}, {
122
- color: "var(--ds-text-lowEmphasis, ".concat(_colors.N80, ")")
122
+ color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
123
123
  });
124
124
  }
125
125
  }));
package/dist/cjs/PopupSelect/components.js CHANGED
@@ -15,6 +15,8 @@ var _reactSelect = require("react-select");
15
15
 
16
16
  var _core = require("@emotion/core");
17
17
 
18
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
19
+
18
20
  var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
19
21
 
20
22
  var _constants = require("@atlaskit/theme/constants");
@@ -32,9 +34,9 @@ var MenuDialog = function MenuDialog(_ref) {
32
34
  style = _ref.style;
33
35
  return (0, _core.jsx)("div", {
34
36
  css: {
35
- backgroundColor: "var(--ds-background-overlay, white)",
37
+ backgroundColor: "var(--ds-surface-overlay, white)",
36
38
  borderRadius: 4,
37
- boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
39
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
38
40
  maxWidth: maxWidth,
39
41
  minWidth: minWidth,
40
42
  zIndex: _constants.layers.modal()
@@ -76,18 +78,7 @@ var Control = function Control(_ref2) {
76
78
  };
77
79
 
78
80
  var DummyControl = function DummyControl(props) {
79
- return (0, _core.jsx)("div", {
80
- css: {
81
- border: 0,
82
- clip: 'rect(1px, 1px, 1px, 1px)',
83
- height: 1,
84
- overflow: 'hidden',
85
- padding: 0,
86
- position: 'absolute',
87
- whiteSpace: 'nowrap',
88
- width: 1
89
- }
90
- }, (0, _core.jsx)(_reactSelect.components.Control, props));
81
+ return (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)(_reactSelect.components.Control, props));
91
82
  }; // NOTE `props` intentionally omitted from `Fragment`
92
83
  // eslint-disable-next-line
93
84
 
package/dist/cjs/Select.js CHANGED
@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
14
14
  var _createSelect = _interopRequireDefault(require("./createSelect"));
15
15
 
16
16
  var packageName = "@atlaskit/select";
17
- var packageVersion = "15.2.6";
17
+ var packageVersion = "15.2.9";
18
18
  var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
19
19
  exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
20
20
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
package/dist/cjs/components/input-options.js CHANGED
@@ -63,15 +63,15 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
63
63
  isSelected = props.isSelected;
64
64
  var styles = {
65
65
  alignItems: 'center',
66
- backgroundColor: isFocused ? "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")") : 'transparent',
66
+ backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
67
67
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
68
68
  display: 'flex ',
69
69
  paddingBottom: 4,
70
70
  paddingLeft: "".concat((0, _constants.gridSize)() * 2, "px"),
71
71
  paddingTop: 4,
72
- boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(_colors.B400, ")"), ";") : '',
72
+ boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(_colors.B400, ")"), ";") : '',
73
73
  ':active': {
74
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")")
74
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
75
75
  },
76
76
  '@media screen and (-ms-high-contrast: active)': {
77
77
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -92,8 +92,8 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
92
92
 
93
93
 
94
94
  var backgroundColor = (0, _components.themed)({
95
- light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N0, ")"),
96
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.DN10, ")")
95
+ light: "var(--ds-background-neutral, ".concat(_colors.N0, ")"),
96
+ dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
97
97
  });
98
98
  var transparent = (0, _components.themed)({
99
99
  light: 'transparent',
@@ -121,28 +121,28 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
121
121
  });
122
122
  } else if (isSelected && isActive) {
123
123
  color = (0, _components.themed)({
124
- light: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B75, ")"),
125
- dark: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B200, ")")
124
+ light: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B75, ")"),
125
+ dark: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
126
126
  });
127
127
  } else if (isActive) {
128
128
  color = (0, _components.themed)({
129
- light: "var(--ds-background-subtleBrand-pressed, ".concat(_colors.B75, ")"),
130
- dark: "var(--ds-background-subtleBrand-pressed, ".concat(_colors.B200, ")")
129
+ light: "var(--ds-background-brand-pressed, ".concat(_colors.B75, ")"),
130
+ dark: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")")
131
131
  });
132
132
  } else if (isFocused && isSelected) {
133
133
  color = (0, _components.themed)({
134
- light: "var(--ds-background-boldBrand-hover, ".concat(_colors.B300, ")"),
135
- dark: "var(--ds-background-boldBrand-hover, ".concat(_colors.B75, ")")
134
+ light: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
135
+ dark: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
136
136
  });
137
137
  } else if (isFocused) {
138
138
  color = (0, _components.themed)({
139
- light: "var(--ds-background-default, ".concat(_colors.N0, ")"),
140
- dark: "var(--ds-background-default, ".concat(_colors.DN30, ")")
139
+ light: "var(--ds-surface, ".concat(_colors.N0, ")"),
140
+ dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
141
141
  });
142
142
  } else if (isSelected) {
143
143
  color = (0, _components.themed)({
144
- light: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
145
- dark: "var(--ds-background-boldBrand-resting, ".concat(_colors.B100, ")")
144
+ light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
145
+ dark: "var(--ds-background-brand-bold, ".concat(_colors.B100, ")")
146
146
  });
147
147
  }
148
148
 
@@ -156,8 +156,8 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
156
156
  isSelected = _ref2.isSelected,
157
157
  rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
158
158
  var color = (0, _components.themed)({
159
- light: "var(--ds-background-default, ".concat(_colors.N0, ")"),
160
- dark: "var(--ds-background-default, ".concat(_colors.DN10, ")")
159
+ light: "var(--ds-surface, ".concat(_colors.N0, ")"),
160
+ dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
161
161
  });
162
162
 
163
163
  if (isDisabled && isSelected) {
@@ -167,8 +167,8 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
167
167
  });
168
168
  } else if (isActive && isSelected && !isDisabled) {
169
169
  color = (0, _components.themed)({
170
- light: "var(--ds-background-default, ".concat(_colors.B400, ")"),
171
- dark: "var(--ds-background-default, ".concat(_colors.DN10, ")")
170
+ light: "var(--ds-surface, ".concat(_colors.B400, ")"),
171
+ dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
172
172
  });
173
173
  } else if (!isSelected) {
174
174
  color = transparent;
@@ -190,18 +190,18 @@ var getBorderColor = function getBorderColor(_ref3) {
190
190
  } else if (isDisabled) {
191
191
  return "var(--ds-background-disabled, ".concat(_colors.N100, ")");
192
192
  } else if (isSelected && isActive) {
193
- return "var(--ds-background-boldBrand-pressed, ".concat(_colors.B400, ")");
193
+ return "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")");
194
194
  } else if (isActive) {
195
- return "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")");
195
+ return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
196
196
  } else if (isFocused && isSelected) {
197
- return "var(--ds-background-boldBrand-hover, ".concat(_colors.B400, ")");
197
+ return "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")");
198
198
  } else if (isFocused) {
199
- return "var(--ds-border-neutral, ".concat(_colors.N100, ")");
199
+ return "var(--ds-border, ".concat(_colors.N100, ")");
200
200
  } else if (isSelected) {
201
- return "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")");
201
+ return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
202
202
  }
203
203
 
204
- return "var(--ds-border-neutral, ".concat(_colors.N100, ")");
204
+ return "var(--ds-border, ".concat(_colors.N100, ")");
205
205
  };
206
206
 
207
207
  var ControlOption = /*#__PURE__*/function (_Component) {
package/dist/cjs/styles.js CHANGED
@@ -35,37 +35,37 @@ function baseStyles(validationState, isCompact) {
35
35
  },
36
36
  input: function input(css) {
37
37
  return _objectSpread(_objectSpread({}, css), {}, {
38
- color: "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))"
38
+ color: "var(--ds-text, hsl(0, 0%, 20%))"
39
39
  });
40
40
  },
41
41
  control: function control(css, _ref2) {
42
42
  var isFocused = _ref2.isFocused,
43
43
  isDisabled = _ref2.isDisabled;
44
- var borderColor = isFocused ? "var(--ds-border-focus, ".concat(_colors.B100, ")") : "var(--ds-border-neutral, ".concat(_colors.N20, ")");
45
- var backgroundColor = isFocused ? "var(--ds-background-default, ".concat(_colors.N0, ")") : "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")");
46
- var backgroundColorHover = isFocused ? "var(--ds-background-default, ".concat(_colors.N0, ")") : "var(--ds-background-default, ".concat(_colors.N30, ")");
44
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border, ".concat(_colors.N20, ")");
45
+ var backgroundColor = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-background-neutral, ".concat(_colors.N20, ")");
46
+ var backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(_colors.N0, ")") : "var(--ds-surface, ".concat(_colors.N30, ")");
47
47
 
48
48
  if (isDisabled) {
49
- backgroundColor = "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")");
49
+ backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N20, ")");
50
50
  borderColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
51
51
  }
52
52
 
53
53
  if (validationState === 'error') {
54
- borderColor = "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")");
54
+ borderColor = "var(--ds-border-danger, ".concat(_colors.R400, ")");
55
55
  }
56
56
 
57
57
  if (validationState === 'success') {
58
- borderColor = "var(--ds-iconBorder-success, ".concat(_colors.G400, ")");
58
+ borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
59
59
  }
60
60
 
61
- var borderColorHover = isFocused ? "var(--ds-border-focus, ".concat(_colors.B100, ")") : "var(--ds-border-neutral, ".concat(_colors.N30, ")");
61
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border, ".concat(_colors.N30, ")");
62
62
 
63
63
  if (validationState === 'error') {
64
- borderColorHover = "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")");
64
+ borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
65
65
  }
66
66
 
67
67
  if (validationState === 'success') {
68
- borderColorHover = "var(--ds-iconBorder-success, ".concat(_colors.G400, ")");
68
+ borderColorHover = "var(--ds-border-success, ".concat(_colors.G400, ")");
69
69
  }
70
70
 
71
71
  var transitionDuration = '200ms';
@@ -114,13 +114,13 @@ function baseStyles(validationState, isCompact) {
114
114
  },
115
115
  clearIndicator: function clearIndicator(css) {
116
116
  return _objectSpread(_objectSpread({}, css), {}, {
117
- color: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")"),
117
+ color: "var(--ds-text-subtlest, ".concat(_colors.N70, ")"),
118
118
  paddingLeft: ICON_PADDING,
119
119
  paddingRight: ICON_PADDING,
120
120
  paddingBottom: isCompact ? 0 : 6,
121
121
  paddingTop: isCompact ? 0 : 6,
122
122
  ':hover': {
123
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")
123
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
124
124
  }
125
125
  });
126
126
  },
@@ -132,7 +132,7 @@ function baseStyles(validationState, isCompact) {
132
132
  },
133
133
  dropdownIndicator: function dropdownIndicator(css, _ref3) {
134
134
  var isDisabled = _ref3.isDisabled;
135
- var color = "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")");
135
+ var color = "var(--ds-text-subtle, ".concat(_colors.N500, ")");
136
136
 
137
137
  if (isDisabled) {
138
138
  color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
@@ -145,7 +145,7 @@ function baseStyles(validationState, isCompact) {
145
145
  paddingBottom: isCompact ? 0 : 6,
146
146
  paddingTop: isCompact ? 0 : 6,
147
147
  ':hover': {
148
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N200, ")")
148
+ color: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
149
149
  }
150
150
  });
151
151
  },
@@ -158,12 +158,12 @@ function baseStyles(validationState, isCompact) {
158
158
  var isFocused = _ref4.isFocused,
159
159
  isSelected = _ref4.isSelected,
160
160
  isDisabled = _ref4.isDisabled;
161
- var color = "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")");
161
+ var color = "var(--ds-text, ".concat(_colors.N800, ")");
162
162
 
163
163
  if (isDisabled) {
164
164
  color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
165
165
  } else if (isSelected) {
166
- color = "var(--ds-text-selected, ".concat(_colors.B400, ")");
166
+ color = "var(--ds-text-brand, ".concat(_colors.B400, ")");
167
167
  }
168
168
 
169
169
  var boxShadow;
@@ -172,15 +172,15 @@ function baseStyles(validationState, isCompact) {
172
172
  if (isDisabled) {
173
173
  backgroundColor = undefined;
174
174
  } else if (isSelected && isFocused) {
175
- backgroundColor = "var(--ds-background-selected-hover, ".concat(_colors.B50, ")");
175
+ backgroundColor = "var(--ds-background-brand-hovered, ".concat(_colors.B50, ")");
176
176
  } else if (isSelected) {
177
- backgroundColor = "var(--ds-background-selected-resting, ".concat(_colors.B50, ")");
177
+ backgroundColor = "var(--ds-background-brand, ".concat(_colors.B50, ")");
178
178
  } else if (isFocused) {
179
- backgroundColor = "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")");
179
+ backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")");
180
180
  }
181
181
 
182
182
  if (!isDisabled && (isFocused || isSelected)) {
183
- boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(_colors.B400, ")"));
183
+ boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(_colors.B400, ")"));
184
184
  }
185
185
 
186
186
  var cursor = isDisabled ? 'not-allowed' : undefined;
@@ -191,7 +191,7 @@ function baseStyles(validationState, isCompact) {
191
191
  cursor: cursor,
192
192
  boxShadow: boxShadow,
193
193
  ':active': {
194
- backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")") : undefined
194
+ backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-brand-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")") : undefined
195
195
  },
196
196
  '@media screen and (-ms-high-contrast: active)': {
197
197
  borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -201,21 +201,21 @@ function baseStyles(validationState, isCompact) {
201
201
  placeholder: function placeholder(css, _ref5) {
202
202
  var isDisabled = _ref5.isDisabled;
203
203
  return _objectSpread(_objectSpread({}, css), {}, {
204
- color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-lowEmphasis, ".concat(_colors.N300, ")")
204
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-subtlest, ".concat(_colors.N300, ")")
205
205
  });
206
206
  },
207
207
  singleValue: function singleValue(css, _ref6) {
208
208
  var isDisabled = _ref6.isDisabled;
209
209
  return _objectSpread(_objectSpread({}, css), {}, {
210
- color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
210
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text, ".concat(_colors.N800, ")"),
211
211
  lineHeight: "".concat((0, _constants.gridSize)() * 2, "px") // 16px
212
212
 
213
213
  });
214
214
  },
215
215
  menu: function menu(css) {
216
216
  return _objectSpread(_objectSpread({}, css), {}, {
217
- backgroundColor: "var(--ds-background-overlay, white)",
218
- boxShadow: "var(--ds-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
217
+ backgroundColor: "var(--ds-surface-overlay, white)",
218
+ boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
219
219
  });
220
220
  },
221
221
  menuList: function menuList(css) {
@@ -228,8 +228,8 @@ function baseStyles(validationState, isCompact) {
228
228
  var isFocused = _ref7.isFocused;
229
229
  return _objectSpread(_objectSpread({}, css), {}, {
230
230
  borderRadius: '2px',
231
- backgroundColor: isFocused ? "var(--ds-background-selected-resting, ".concat(_colors.N40, ")") : "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N40, ")"),
232
- boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-background-default, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focus, transparent)") : 'none',
231
+ backgroundColor: isFocused ? "var(--ds-background-brand, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
232
+ boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
233
233
  maxWidth: '100%',
234
234
  '@media screen and (-ms-high-contrast: active)': {
235
235
  border: isFocused ? '1px solid transparent' : 'none'
@@ -240,24 +240,24 @@ function baseStyles(validationState, isCompact) {
240
240
  var isFocused = _ref8.isFocused;
241
241
  return _objectSpread(_objectSpread({}, css), {}, {
242
242
  padding: '2px',
243
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))",
243
+ color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
244
244
  paddingRight: '2px'
245
245
  });
246
246
  },
247
247
  multiValueRemove: function multiValueRemove(css, _ref9) {
248
248
  var isFocused = _ref9.isFocused;
249
249
  return _objectSpread(_objectSpread({}, css), {}, {
250
- backgroundColor: isFocused && "var(--ds-background-selected-resting, ".concat(_colors.R75, ")"),
251
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text-highEmphasis, #000)",
250
+ backgroundColor: isFocused && "var(--ds-background-brand, ".concat(_colors.R75, ")"),
251
+ fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
252
252
  paddingLeft: '2px',
253
253
  paddingRight: '2px',
254
254
  borderRadius: '0px 2px 2px 0px',
255
255
  ':hover': {
256
- backgroundColor: "var(--ds-background-subtleDanger-hover, ".concat(_colors.R75, ")"),
256
+ backgroundColor: "var(--ds-background-danger-hovered, ".concat(_colors.R75, ")"),
257
257
  fill: "var(--ds-text-danger, #000)"
258
258
  },
259
259
  ':active': {
260
- backgroundColor: "var(--ds-background-subtleDanger-pressed, ".concat(_colors.R75, ")"),
260
+ backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
261
261
  fill: "var(--ds-text-danger, #000)"
262
262
  }
263
263
  });
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "15.2.6",
3
+ "version": "15.2.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/PopupSelect/PopupSelect.js CHANGED
@@ -56,7 +56,7 @@ export default class PopupSelect extends PureComponent {
56
56
 
57
57
  _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
58
58
  groupHeading: provided => ({ ...provided,
59
- color: `var(--ds-text-lowEmphasis, ${N80})`
59
+ color: `var(--ds-text-subtlest, ${N80})`
60
60
  })
61
61
  }));
62
62
 
package/dist/es2019/PopupSelect/components.js CHANGED
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  /** @jsx jsx */
4
4
  import { components } from 'react-select';
5
5
  import { jsx } from '@emotion/core';
6
+ import VisuallyHidden from '@atlaskit/visually-hidden';
6
7
  import SearchIcon from '@atlaskit/icon/glyph/editor/search';
7
8
  import { layers } from '@atlaskit/theme/constants';
8
9
  import { N40A } from '@atlaskit/theme/colors';
@@ -14,9 +15,9 @@ export const MenuDialog = ({
14
15
  style
15
16
  }) => jsx("div", {
16
17
  css: {
17
- backgroundColor: "var(--ds-background-overlay, white)",
18
+ backgroundColor: "var(--ds-surface-overlay, white)",
18
19
  borderRadius: 4,
19
- boxShadow: `var(--ds-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
20
+ boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
20
21
  maxWidth,
21
22
  minWidth,
22
23
  zIndex: layers.modal()
@@ -50,18 +51,7 @@ const Control = ({
50
51
  innerProps: innerProps
51
52
  })));
52
53
 
53
- export const DummyControl = props => jsx("div", {
54
- css: {
55
- border: 0,
56
- clip: 'rect(1px, 1px, 1px, 1px)',
57
- height: 1,
58
- overflow: 'hidden',
59
- padding: 0,
60
- position: 'absolute',
61
- whiteSpace: 'nowrap',
62
- width: 1
63
- }
64
- }, jsx(components.Control, props)); // NOTE `props` intentionally omitted from `Fragment`
54
+ export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props)); // NOTE `props` intentionally omitted from `Fragment`
65
55
  // eslint-disable-next-line
66
56
 
67
57
  const Menu = ({
package/dist/es2019/Select.js CHANGED
@@ -2,7 +2,7 @@ import Select from 'react-select';
2
2
  import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
3
3
  import createSelect from './createSelect';
4
4
  const packageName = "@atlaskit/select";
5
- const packageVersion = "15.2.6";
5
+ const packageVersion = "15.2.9";
6
6
  export const SelectWithoutAnalytics = createSelect(Select);
7
7
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/es2019/components/input-options.js CHANGED
@@ -21,15 +21,15 @@ const getPrimitiveStyles = props => {
21
21
  } = props;
22
22
  const styles = {
23
23
  alignItems: 'center',
24
- backgroundColor: isFocused ? `var(--ds-background-transparentNeutral-hover, ${N20})` : 'transparent',
24
+ backgroundColor: isFocused ? `var(--ds-background-neutral-subtle-hovered, ${N20})` : 'transparent',
25
25
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
26
26
  display: 'flex ',
27
27
  paddingBottom: 4,
28
28
  paddingLeft: `${gridSize() * 2}px`,
29
29
  paddingTop: 4,
30
- boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-text-selected, ${B400})`};` : '',
30
+ boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-text-brand, ${B400})`};` : '',
31
31
  ':active': {
32
- backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${N30})`
32
+ backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`
33
33
  },
34
34
  '@media screen and (-ms-high-contrast: active)': {
35
35
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -50,8 +50,8 @@ const getPrimitiveStyles = props => {
50
50
 
51
51
 
52
52
  const backgroundColor = themed({
53
- light: `var(--ds-background-subtleNeutral-resting, ${N0})`,
54
- dark: `var(--ds-background-subtleNeutral-resting, ${DN10})`
53
+ light: `var(--ds-background-neutral, ${N0})`,
54
+ dark: `var(--ds-background-neutral, ${DN10})`
55
55
  });
56
56
  const transparent = themed({
57
57
  light: 'transparent',
@@ -80,28 +80,28 @@ const getPrimaryColor = ({
80
80
  });
81
81
  } else if (isSelected && isActive) {
82
82
  color = themed({
83
- light: `var(--ds-background-boldBrand-pressed, ${B75})`,
84
- dark: `var(--ds-background-boldBrand-pressed, ${B200})`
83
+ light: `var(--ds-background-brand-bold-pressed, ${B75})`,
84
+ dark: `var(--ds-background-brand-bold-pressed, ${B200})`
85
85
  });
86
86
  } else if (isActive) {
87
87
  color = themed({
88
- light: `var(--ds-background-subtleBrand-pressed, ${B75})`,
89
- dark: `var(--ds-background-subtleBrand-pressed, ${B200})`
88
+ light: `var(--ds-background-brand-pressed, ${B75})`,
89
+ dark: `var(--ds-background-brand-pressed, ${B200})`
90
90
  });
91
91
  } else if (isFocused && isSelected) {
92
92
  color = themed({
93
- light: `var(--ds-background-boldBrand-hover, ${B300})`,
94
- dark: `var(--ds-background-boldBrand-hover, ${B75})`
93
+ light: `var(--ds-background-brand-bold-hovered, ${B300})`,
94
+ dark: `var(--ds-background-brand-bold-hovered, ${B75})`
95
95
  });
96
96
  } else if (isFocused) {
97
97
  color = themed({
98
- light: `var(--ds-background-default, ${N0})`,
99
- dark: `var(--ds-background-default, ${DN30})`
98
+ light: `var(--ds-surface, ${N0})`,
99
+ dark: `var(--ds-surface, ${DN30})`
100
100
  });
101
101
  } else if (isSelected) {
102
102
  color = themed({
103
- light: `var(--ds-background-boldBrand-resting, ${B400})`,
104
- dark: `var(--ds-background-boldBrand-resting, ${B100})`
103
+ light: `var(--ds-background-brand-bold, ${B400})`,
104
+ dark: `var(--ds-background-brand-bold, ${B100})`
105
105
  });
106
106
  }
107
107
 
@@ -116,8 +116,8 @@ const getSecondaryColor = ({
116
116
  ...rest
117
117
  }) => {
118
118
  let color = themed({
119
- light: `var(--ds-background-default, ${N0})`,
120
- dark: `var(--ds-background-default, ${DN10})`
119
+ light: `var(--ds-surface, ${N0})`,
120
+ dark: `var(--ds-surface, ${DN10})`
121
121
  });
122
122
 
123
123
  if (isDisabled && isSelected) {
@@ -127,8 +127,8 @@ const getSecondaryColor = ({
127
127
  });
128
128
  } else if (isActive && isSelected && !isDisabled) {
129
129
  color = themed({
130
- light: `var(--ds-background-default, ${B400})`,
131
- dark: `var(--ds-background-default, ${DN10})`
130
+ light: `var(--ds-surface, ${B400})`,
131
+ dark: `var(--ds-surface, ${DN10})`
132
132
  });
133
133
  } else if (!isSelected) {
134
134
  color = transparent;
@@ -150,18 +150,18 @@ const getBorderColor = ({
150
150
  } else if (isDisabled) {
151
151
  return `var(--ds-background-disabled, ${N100})`;
152
152
  } else if (isSelected && isActive) {
153
- return `var(--ds-background-boldBrand-pressed, ${B400})`;
153
+ return `var(--ds-background-brand-bold-pressed, ${B400})`;
154
154
  } else if (isActive) {
155
- return `var(--ds-background-boldBrand-resting, ${B400})`;
155
+ return `var(--ds-background-brand-bold, ${B400})`;
156
156
  } else if (isFocused && isSelected) {
157
- return `var(--ds-background-boldBrand-hover, ${B400})`;
157
+ return `var(--ds-background-brand-bold-hovered, ${B400})`;
158
158
  } else if (isFocused) {
159
- return `var(--ds-border-neutral, ${N100})`;
159
+ return `var(--ds-border, ${N100})`;
160
160
  } else if (isSelected) {
161
- return `var(--ds-background-boldBrand-resting, ${B400})`;
161
+ return `var(--ds-background-brand-bold, ${B400})`;
162
162
  }
163
163
 
164
- return `var(--ds-border-neutral, ${N100})`;
164
+ return `var(--ds-border, ${N100})`;
165
165
  };
166
166
 
167
167
  class ControlOption extends Component {
package/dist/es2019/styles.js CHANGED
@@ -15,37 +15,37 @@ export default function baseStyles(validationState, isCompact) {
15
15
  cursor: isDisabled ? 'not-allowed' : undefined
16
16
  }),
17
17
  input: css => ({ ...css,
18
- color: "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))"
18
+ color: "var(--ds-text, hsl(0, 0%, 20%))"
19
19
  }),
20
20
  control: (css, {
21
21
  isFocused,
22
22
  isDisabled
23
23
  }) => {
24
- let borderColor = isFocused ? `var(--ds-border-focus, ${B100})` : `var(--ds-border-neutral, ${N20})`;
25
- let backgroundColor = isFocused ? `var(--ds-background-default, ${N0})` : `var(--ds-background-subtleNeutral-resting, ${N20})`;
26
- let backgroundColorHover = isFocused ? `var(--ds-background-default, ${N0})` : `var(--ds-background-default, ${N30})`;
24
+ let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border, ${N20})`;
25
+ let backgroundColor = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-background-neutral, ${N20})`;
26
+ let backgroundColorHover = isFocused ? `var(--ds-surface, ${N0})` : `var(--ds-surface, ${N30})`;
27
27
 
28
28
  if (isDisabled) {
29
- backgroundColor = `var(--ds-background-subtleNeutral-resting, ${N20})`;
29
+ backgroundColor = `var(--ds-background-neutral, ${N20})`;
30
30
  borderColor = `var(--ds-background-disabled, ${N20})`;
31
31
  }
32
32
 
33
33
  if (validationState === 'error') {
34
- borderColor = `var(--ds-iconBorder-danger, ${R400})`;
34
+ borderColor = `var(--ds-border-danger, ${R400})`;
35
35
  }
36
36
 
37
37
  if (validationState === 'success') {
38
- borderColor = `var(--ds-iconBorder-success, ${G400})`;
38
+ borderColor = `var(--ds-border-success, ${G400})`;
39
39
  }
40
40
 
41
- let borderColorHover = isFocused ? `var(--ds-border-focus, ${B100})` : `var(--ds-border-neutral, ${N30})`;
41
+ let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border, ${N30})`;
42
42
 
43
43
  if (validationState === 'error') {
44
- borderColorHover = `var(--ds-iconBorder-danger, ${R400})`;
44
+ borderColorHover = `var(--ds-border-danger, ${R400})`;
45
45
  }
46
46
 
47
47
  if (validationState === 'success') {
48
- borderColorHover = `var(--ds-iconBorder-success, ${G400})`;
48
+ borderColorHover = `var(--ds-border-success, ${G400})`;
49
49
  }
50
50
 
51
51
  const transitionDuration = '200ms';
@@ -92,13 +92,13 @@ export default function baseStyles(validationState, isCompact) {
92
92
  paddingTop: isCompact ? 0 : 2
93
93
  }),
94
94
  clearIndicator: css => ({ ...css,
95
- color: `var(--ds-text-lowEmphasis, ${N70})`,
95
+ color: `var(--ds-text-subtlest, ${N70})`,
96
96
  paddingLeft: ICON_PADDING,
97
97
  paddingRight: ICON_PADDING,
98
98
  paddingBottom: isCompact ? 0 : 6,
99
99
  paddingTop: isCompact ? 0 : 6,
100
100
  ':hover': {
101
- color: `var(--ds-text-mediumEmphasis, ${N500})`
101
+ color: `var(--ds-text-subtle, ${N500})`
102
102
  }
103
103
  }),
104
104
  loadingIndicator: css => ({ ...css,
@@ -108,7 +108,7 @@ export default function baseStyles(validationState, isCompact) {
108
108
  dropdownIndicator: (css, {
109
109
  isDisabled
110
110
  }) => {
111
- let color = `var(--ds-text-mediumEmphasis, ${N500})`;
111
+ let color = `var(--ds-text-subtle, ${N500})`;
112
112
 
113
113
  if (isDisabled) {
114
114
  color = `var(--ds-text-disabled, ${N70})`;
@@ -121,7 +121,7 @@ export default function baseStyles(validationState, isCompact) {
121
121
  paddingBottom: isCompact ? 0 : 6,
122
122
  paddingTop: isCompact ? 0 : 6,
123
123
  ':hover': {
124
- color: `var(--ds-text-mediumEmphasis, ${N200})`
124
+ color: `var(--ds-text-subtle, ${N200})`
125
125
  }
126
126
  };
127
127
  },
@@ -133,12 +133,12 @@ export default function baseStyles(validationState, isCompact) {
133
133
  isSelected,
134
134
  isDisabled
135
135
  }) => {
136
- let color = `var(--ds-text-highEmphasis, ${N800})`;
136
+ let color = `var(--ds-text, ${N800})`;
137
137
 
138
138
  if (isDisabled) {
139
139
  color = `var(--ds-text-disabled, ${N70})`;
140
140
  } else if (isSelected) {
141
- color = `var(--ds-text-selected, ${B400})`;
141
+ color = `var(--ds-text-brand, ${B400})`;
142
142
  }
143
143
 
144
144
  let boxShadow;
@@ -147,15 +147,15 @@ export default function baseStyles(validationState, isCompact) {
147
147
  if (isDisabled) {
148
148
  backgroundColor = undefined;
149
149
  } else if (isSelected && isFocused) {
150
- backgroundColor = `var(--ds-background-selected-hover, ${B50})`;
150
+ backgroundColor = `var(--ds-background-brand-hovered, ${B50})`;
151
151
  } else if (isSelected) {
152
- backgroundColor = `var(--ds-background-selected-resting, ${B50})`;
152
+ backgroundColor = `var(--ds-background-brand, ${B50})`;
153
153
  } else if (isFocused) {
154
- backgroundColor = `var(--ds-background-transparentNeutral-hover, ${N20})`;
154
+ backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
155
155
  }
156
156
 
157
157
  if (!isDisabled && (isFocused || isSelected)) {
158
- boxShadow = `inset 2px 0px 0px ${`var(--ds-text-selected, ${B400})`}`;
158
+ boxShadow = `inset 2px 0px 0px ${`var(--ds-text-brand, ${B400})`}`;
159
159
  }
160
160
 
161
161
  const cursor = isDisabled ? 'not-allowed' : undefined;
@@ -166,7 +166,7 @@ export default function baseStyles(validationState, isCompact) {
166
166
  cursor,
167
167
  boxShadow,
168
168
  ':active': {
169
- backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-selected-pressed, ${N20})` : `var(--ds-background-transparentNeutral-pressed, ${N30})` : undefined
169
+ backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-brand-pressed, ${N20})` : `var(--ds-background-neutral-subtle-pressed, ${N30})` : undefined
170
170
  },
171
171
  '@media screen and (-ms-high-contrast: active)': {
172
172
  borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -176,18 +176,18 @@ export default function baseStyles(validationState, isCompact) {
176
176
  placeholder: (css, {
177
177
  isDisabled
178
178
  }) => ({ ...css,
179
- color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-lowEmphasis, ${N300})`
179
+ color: isDisabled ? `var(--ds-text-disabled, ${N300})` : `var(--ds-text-subtlest, ${N300})`
180
180
  }),
181
181
  singleValue: (css, {
182
182
  isDisabled
183
183
  }) => ({ ...css,
184
- color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text-highEmphasis, ${N800})`,
184
+ color: isDisabled ? `var(--ds-text-disabled, ${N70})` : `var(--ds-text, ${N800})`,
185
185
  lineHeight: `${gridSize() * 2}px` // 16px
186
186
 
187
187
  }),
188
188
  menu: css => ({ ...css,
189
- backgroundColor: "var(--ds-background-overlay, white)",
190
- boxShadow: "var(--ds-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
189
+ backgroundColor: "var(--ds-surface-overlay, white)",
190
+ boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
191
191
  }),
192
192
  menuList: css => ({ ...css,
193
193
  paddingTop: gridSize(),
@@ -197,8 +197,8 @@ export default function baseStyles(validationState, isCompact) {
197
197
  isFocused
198
198
  }) => ({ ...css,
199
199
  borderRadius: '2px',
200
- backgroundColor: isFocused ? `var(--ds-background-selected-resting, ${N40})` : `var(--ds-background-transparentNeutral-hover, ${N40})`,
201
- boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-background-default, transparent)"}, 0 0 0 4px ${"var(--ds-border-focus, transparent)"}` : 'none',
200
+ backgroundColor: isFocused ? `var(--ds-background-brand, ${N40})` : `var(--ds-background-neutral-subtle-hovered, ${N40})`,
201
+ boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
202
202
  maxWidth: '100%',
203
203
  '@media screen and (-ms-high-contrast: active)': {
204
204
  border: isFocused ? '1px solid transparent' : 'none'
@@ -208,24 +208,24 @@ export default function baseStyles(validationState, isCompact) {
208
208
  isFocused
209
209
  }) => ({ ...css,
210
210
  padding: '2px',
211
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))",
211
+ color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
212
212
  paddingRight: '2px'
213
213
  }),
214
214
  multiValueRemove: (css, {
215
215
  // @ts-ignore: missing in @types/react-select
216
216
  isFocused
217
217
  }) => ({ ...css,
218
- backgroundColor: isFocused && `var(--ds-background-selected-resting, ${R75})`,
219
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text-highEmphasis, #000)",
218
+ backgroundColor: isFocused && `var(--ds-background-brand, ${R75})`,
219
+ fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
220
220
  paddingLeft: '2px',
221
221
  paddingRight: '2px',
222
222
  borderRadius: '0px 2px 2px 0px',
223
223
  ':hover': {
224
- backgroundColor: `var(--ds-background-subtleDanger-hover, ${R75})`,
224
+ backgroundColor: `var(--ds-background-danger-hovered, ${R75})`,
225
225
  fill: "var(--ds-text-danger, #000)"
226
226
  },
227
227
  ':active': {
228
- backgroundColor: `var(--ds-background-subtleDanger-pressed, ${R75})`,
228
+ backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
229
229
  fill: "var(--ds-text-danger, #000)"
230
230
  }
231
231
  })
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "15.2.6",
3
+ "version": "15.2.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/PopupSelect/PopupSelect.js CHANGED
@@ -90,7 +90,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
90
90
  _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState, _this.props.spacing === 'compact'), {
91
91
  groupHeading: function groupHeading(provided) {
92
92
  return _objectSpread(_objectSpread({}, provided), {}, {
93
- color: "var(--ds-text-lowEmphasis, ".concat(N80, ")")
93
+ color: "var(--ds-text-subtlest, ".concat(N80, ")")
94
94
  });
95
95
  }
96
96
  }));
package/dist/esm/PopupSelect/components.js CHANGED
@@ -6,6 +6,7 @@ var _excluded = ["innerRef", "innerProps"],
6
6
  /** @jsx jsx */
7
7
  import { components } from 'react-select';
8
8
  import { jsx } from '@emotion/core';
9
+ import VisuallyHidden from '@atlaskit/visually-hidden';
9
10
  import SearchIcon from '@atlaskit/icon/glyph/editor/search';
10
11
  import { layers } from '@atlaskit/theme/constants';
11
12
  import { N40A } from '@atlaskit/theme/colors';
@@ -17,9 +18,9 @@ export var MenuDialog = function MenuDialog(_ref) {
17
18
  style = _ref.style;
18
19
  return jsx("div", {
19
20
  css: {
20
- backgroundColor: "var(--ds-background-overlay, white)",
21
+ backgroundColor: "var(--ds-surface-overlay, white)",
21
22
  borderRadius: 4,
22
- boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"),
23
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"),
23
24
  maxWidth: maxWidth,
24
25
  minWidth: minWidth,
25
26
  zIndex: layers.modal()
@@ -59,18 +60,7 @@ var Control = function Control(_ref2) {
59
60
  };
60
61
 
61
62
  export var DummyControl = function DummyControl(props) {
62
- return jsx("div", {
63
- css: {
64
- border: 0,
65
- clip: 'rect(1px, 1px, 1px, 1px)',
66
- height: 1,
67
- overflow: 'hidden',
68
- padding: 0,
69
- position: 'absolute',
70
- whiteSpace: 'nowrap',
71
- width: 1
72
- }
73
- }, jsx(components.Control, props));
63
+ return jsx(VisuallyHidden, null, jsx(components.Control, props));
74
64
  }; // NOTE `props` intentionally omitted from `Fragment`
75
65
  // eslint-disable-next-line
76
66
 
package/dist/esm/Select.js CHANGED
@@ -2,7 +2,7 @@ import Select from 'react-select';
2
2
  import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
3
3
  import createSelect from './createSelect';
4
4
  var packageName = "@atlaskit/select";
5
- var packageVersion = "15.2.6";
5
+ var packageVersion = "15.2.9";
6
6
  export var SelectWithoutAnalytics = createSelect(Select);
7
7
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
8
8
  export default withAnalyticsContext({
package/dist/esm/components/input-options.js CHANGED
@@ -39,15 +39,15 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
39
39
  isSelected = props.isSelected;
40
40
  var styles = {
41
41
  alignItems: 'center',
42
- backgroundColor: isFocused ? "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")") : 'transparent',
42
+ backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")") : 'transparent',
43
43
  color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
44
44
  display: 'flex ',
45
45
  paddingBottom: 4,
46
46
  paddingLeft: "".concat(gridSize() * 2, "px"),
47
47
  paddingTop: 4,
48
- boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(B400, ")"), ";") : '',
48
+ boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(B400, ")"), ";") : '',
49
49
  ':active': {
50
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")")
50
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")")
51
51
  },
52
52
  '@media screen and (-ms-high-contrast: active)': {
53
53
  borderLeft: isFocused ? '2px solid transparent' : ''
@@ -68,8 +68,8 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
68
68
 
69
69
 
70
70
  var backgroundColor = themed({
71
- light: "var(--ds-background-subtleNeutral-resting, ".concat(N0, ")"),
72
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(DN10, ")")
71
+ light: "var(--ds-background-neutral, ".concat(N0, ")"),
72
+ dark: "var(--ds-background-neutral, ".concat(DN10, ")")
73
73
  });
74
74
  var transparent = themed({
75
75
  light: 'transparent',
@@ -98,28 +98,28 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
98
98
  });
99
99
  } else if (isSelected && isActive) {
100
100
  color = themed({
101
- light: "var(--ds-background-boldBrand-pressed, ".concat(B75, ")"),
102
- dark: "var(--ds-background-boldBrand-pressed, ".concat(B200, ")")
101
+ light: "var(--ds-background-brand-bold-pressed, ".concat(B75, ")"),
102
+ dark: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
103
103
  });
104
104
  } else if (isActive) {
105
105
  color = themed({
106
- light: "var(--ds-background-subtleBrand-pressed, ".concat(B75, ")"),
107
- dark: "var(--ds-background-subtleBrand-pressed, ".concat(B200, ")")
106
+ light: "var(--ds-background-brand-pressed, ".concat(B75, ")"),
107
+ dark: "var(--ds-background-brand-pressed, ".concat(B200, ")")
108
108
  });
109
109
  } else if (isFocused && isSelected) {
110
110
  color = themed({
111
- light: "var(--ds-background-boldBrand-hover, ".concat(B300, ")"),
112
- dark: "var(--ds-background-boldBrand-hover, ".concat(B75, ")")
111
+ light: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
112
+ dark: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
113
113
  });
114
114
  } else if (isFocused) {
115
115
  color = themed({
116
- light: "var(--ds-background-default, ".concat(N0, ")"),
117
- dark: "var(--ds-background-default, ".concat(DN30, ")")
116
+ light: "var(--ds-surface, ".concat(N0, ")"),
117
+ dark: "var(--ds-surface, ".concat(DN30, ")")
118
118
  });
119
119
  } else if (isSelected) {
120
120
  color = themed({
121
- light: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
122
- dark: "var(--ds-background-boldBrand-resting, ".concat(B100, ")")
121
+ light: "var(--ds-background-brand-bold, ".concat(B400, ")"),
122
+ dark: "var(--ds-background-brand-bold, ".concat(B100, ")")
123
123
  });
124
124
  }
125
125
 
@@ -134,8 +134,8 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
134
134
  rest = _objectWithoutProperties(_ref2, _excluded2);
135
135
 
136
136
  var color = themed({
137
- light: "var(--ds-background-default, ".concat(N0, ")"),
138
- dark: "var(--ds-background-default, ".concat(DN10, ")")
137
+ light: "var(--ds-surface, ".concat(N0, ")"),
138
+ dark: "var(--ds-surface, ".concat(DN10, ")")
139
139
  });
140
140
 
141
141
  if (isDisabled && isSelected) {
@@ -145,8 +145,8 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
145
145
  });
146
146
  } else if (isActive && isSelected && !isDisabled) {
147
147
  color = themed({
148
- light: "var(--ds-background-default, ".concat(B400, ")"),
149
- dark: "var(--ds-background-default, ".concat(DN10, ")")
148
+ light: "var(--ds-surface, ".concat(B400, ")"),
149
+ dark: "var(--ds-surface, ".concat(DN10, ")")
150
150
  });
151
151
  } else if (!isSelected) {
152
152
  color = transparent;
@@ -168,18 +168,18 @@ var getBorderColor = function getBorderColor(_ref3) {
168
168
  } else if (isDisabled) {
169
169
  return "var(--ds-background-disabled, ".concat(N100, ")");
170
170
  } else if (isSelected && isActive) {
171
- return "var(--ds-background-boldBrand-pressed, ".concat(B400, ")");
171
+ return "var(--ds-background-brand-bold-pressed, ".concat(B400, ")");
172
172
  } else if (isActive) {
173
- return "var(--ds-background-boldBrand-resting, ".concat(B400, ")");
173
+ return "var(--ds-background-brand-bold, ".concat(B400, ")");
174
174
  } else if (isFocused && isSelected) {
175
- return "var(--ds-background-boldBrand-hover, ".concat(B400, ")");
175
+ return "var(--ds-background-brand-bold-hovered, ".concat(B400, ")");
176
176
  } else if (isFocused) {
177
- return "var(--ds-border-neutral, ".concat(N100, ")");
177
+ return "var(--ds-border, ".concat(N100, ")");
178
178
  } else if (isSelected) {
179
- return "var(--ds-background-boldBrand-resting, ".concat(B400, ")");
179
+ return "var(--ds-background-brand-bold, ".concat(B400, ")");
180
180
  }
181
181
 
182
- return "var(--ds-border-neutral, ".concat(N100, ")");
182
+ return "var(--ds-border, ".concat(N100, ")");
183
183
  };
184
184
 
185
185
  var ControlOption = /*#__PURE__*/function (_Component) {
package/dist/esm/styles.js CHANGED
@@ -23,37 +23,37 @@ export default function baseStyles(validationState, isCompact) {
23
23
  },
24
24
  input: function input(css) {
25
25
  return _objectSpread(_objectSpread({}, css), {}, {
26
- color: "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))"
26
+ color: "var(--ds-text, hsl(0, 0%, 20%))"
27
27
  });
28
28
  },
29
29
  control: function control(css, _ref2) {
30
30
  var isFocused = _ref2.isFocused,
31
31
  isDisabled = _ref2.isDisabled;
32
- var borderColor = isFocused ? "var(--ds-border-focus, ".concat(B100, ")") : "var(--ds-border-neutral, ".concat(N20, ")");
33
- var backgroundColor = isFocused ? "var(--ds-background-default, ".concat(N0, ")") : "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")");
34
- var backgroundColorHover = isFocused ? "var(--ds-background-default, ".concat(N0, ")") : "var(--ds-background-default, ".concat(N30, ")");
32
+ var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border, ".concat(N20, ")");
33
+ var backgroundColor = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-background-neutral, ".concat(N20, ")");
34
+ var backgroundColorHover = isFocused ? "var(--ds-surface, ".concat(N0, ")") : "var(--ds-surface, ".concat(N30, ")");
35
35
 
36
36
  if (isDisabled) {
37
- backgroundColor = "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")");
37
+ backgroundColor = "var(--ds-background-neutral, ".concat(N20, ")");
38
38
  borderColor = "var(--ds-background-disabled, ".concat(N20, ")");
39
39
  }
40
40
 
41
41
  if (validationState === 'error') {
42
- borderColor = "var(--ds-iconBorder-danger, ".concat(R400, ")");
42
+ borderColor = "var(--ds-border-danger, ".concat(R400, ")");
43
43
  }
44
44
 
45
45
  if (validationState === 'success') {
46
- borderColor = "var(--ds-iconBorder-success, ".concat(G400, ")");
46
+ borderColor = "var(--ds-border-success, ".concat(G400, ")");
47
47
  }
48
48
 
49
- var borderColorHover = isFocused ? "var(--ds-border-focus, ".concat(B100, ")") : "var(--ds-border-neutral, ".concat(N30, ")");
49
+ var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border, ".concat(N30, ")");
50
50
 
51
51
  if (validationState === 'error') {
52
- borderColorHover = "var(--ds-iconBorder-danger, ".concat(R400, ")");
52
+ borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
53
53
  }
54
54
 
55
55
  if (validationState === 'success') {
56
- borderColorHover = "var(--ds-iconBorder-success, ".concat(G400, ")");
56
+ borderColorHover = "var(--ds-border-success, ".concat(G400, ")");
57
57
  }
58
58
 
59
59
  var transitionDuration = '200ms';
@@ -102,13 +102,13 @@ export default function baseStyles(validationState, isCompact) {
102
102
  },
103
103
  clearIndicator: function clearIndicator(css) {
104
104
  return _objectSpread(_objectSpread({}, css), {}, {
105
- color: "var(--ds-text-lowEmphasis, ".concat(N70, ")"),
105
+ color: "var(--ds-text-subtlest, ".concat(N70, ")"),
106
106
  paddingLeft: ICON_PADDING,
107
107
  paddingRight: ICON_PADDING,
108
108
  paddingBottom: isCompact ? 0 : 6,
109
109
  paddingTop: isCompact ? 0 : 6,
110
110
  ':hover': {
111
- color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")")
111
+ color: "var(--ds-text-subtle, ".concat(N500, ")")
112
112
  }
113
113
  });
114
114
  },
@@ -120,7 +120,7 @@ export default function baseStyles(validationState, isCompact) {
120
120
  },
121
121
  dropdownIndicator: function dropdownIndicator(css, _ref3) {
122
122
  var isDisabled = _ref3.isDisabled;
123
- var color = "var(--ds-text-mediumEmphasis, ".concat(N500, ")");
123
+ var color = "var(--ds-text-subtle, ".concat(N500, ")");
124
124
 
125
125
  if (isDisabled) {
126
126
  color = "var(--ds-text-disabled, ".concat(N70, ")");
@@ -133,7 +133,7 @@ export default function baseStyles(validationState, isCompact) {
133
133
  paddingBottom: isCompact ? 0 : 6,
134
134
  paddingTop: isCompact ? 0 : 6,
135
135
  ':hover': {
136
- color: "var(--ds-text-mediumEmphasis, ".concat(N200, ")")
136
+ color: "var(--ds-text-subtle, ".concat(N200, ")")
137
137
  }
138
138
  });
139
139
  },
@@ -146,12 +146,12 @@ export default function baseStyles(validationState, isCompact) {
146
146
  var isFocused = _ref4.isFocused,
147
147
  isSelected = _ref4.isSelected,
148
148
  isDisabled = _ref4.isDisabled;
149
- var color = "var(--ds-text-highEmphasis, ".concat(N800, ")");
149
+ var color = "var(--ds-text, ".concat(N800, ")");
150
150
 
151
151
  if (isDisabled) {
152
152
  color = "var(--ds-text-disabled, ".concat(N70, ")");
153
153
  } else if (isSelected) {
154
- color = "var(--ds-text-selected, ".concat(B400, ")");
154
+ color = "var(--ds-text-brand, ".concat(B400, ")");
155
155
  }
156
156
 
157
157
  var boxShadow;
@@ -160,15 +160,15 @@ export default function baseStyles(validationState, isCompact) {
160
160
  if (isDisabled) {
161
161
  backgroundColor = undefined;
162
162
  } else if (isSelected && isFocused) {
163
- backgroundColor = "var(--ds-background-selected-hover, ".concat(B50, ")");
163
+ backgroundColor = "var(--ds-background-brand-hovered, ".concat(B50, ")");
164
164
  } else if (isSelected) {
165
- backgroundColor = "var(--ds-background-selected-resting, ".concat(B50, ")");
165
+ backgroundColor = "var(--ds-background-brand, ".concat(B50, ")");
166
166
  } else if (isFocused) {
167
- backgroundColor = "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")");
167
+ backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")");
168
168
  }
169
169
 
170
170
  if (!isDisabled && (isFocused || isSelected)) {
171
- boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(B400, ")"));
171
+ boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(B400, ")"));
172
172
  }
173
173
 
174
174
  var cursor = isDisabled ? 'not-allowed' : undefined;
@@ -179,7 +179,7 @@ export default function baseStyles(validationState, isCompact) {
179
179
  cursor: cursor,
180
180
  boxShadow: boxShadow,
181
181
  ':active': {
182
- backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(N20, ")") : "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")") : undefined
182
+ backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-brand-pressed, ".concat(N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")") : undefined
183
183
  },
184
184
  '@media screen and (-ms-high-contrast: active)': {
185
185
  borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -189,21 +189,21 @@ export default function baseStyles(validationState, isCompact) {
189
189
  placeholder: function placeholder(css, _ref5) {
190
190
  var isDisabled = _ref5.isDisabled;
191
191
  return _objectSpread(_objectSpread({}, css), {}, {
192
- color: isDisabled ? "var(--ds-text-disabled, ".concat(N300, ")") : "var(--ds-text-lowEmphasis, ".concat(N300, ")")
192
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(N300, ")") : "var(--ds-text-subtlest, ".concat(N300, ")")
193
193
  });
194
194
  },
195
195
  singleValue: function singleValue(css, _ref6) {
196
196
  var isDisabled = _ref6.isDisabled;
197
197
  return _objectSpread(_objectSpread({}, css), {}, {
198
- color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text-highEmphasis, ".concat(N800, ")"),
198
+ color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : "var(--ds-text, ".concat(N800, ")"),
199
199
  lineHeight: "".concat(gridSize() * 2, "px") // 16px
200
200
 
201
201
  });
202
202
  },
203
203
  menu: function menu(css) {
204
204
  return _objectSpread(_objectSpread({}, css), {}, {
205
- backgroundColor: "var(--ds-background-overlay, white)",
206
- boxShadow: "var(--ds-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
205
+ backgroundColor: "var(--ds-surface-overlay, white)",
206
+ boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
207
207
  });
208
208
  },
209
209
  menuList: function menuList(css) {
@@ -216,8 +216,8 @@ export default function baseStyles(validationState, isCompact) {
216
216
  var isFocused = _ref7.isFocused;
217
217
  return _objectSpread(_objectSpread({}, css), {}, {
218
218
  borderRadius: '2px',
219
- backgroundColor: isFocused ? "var(--ds-background-selected-resting, ".concat(N40, ")") : "var(--ds-background-transparentNeutral-hover, ".concat(N40, ")"),
220
- boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-background-default, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focus, transparent)") : 'none',
219
+ backgroundColor: isFocused ? "var(--ds-background-brand, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
220
+ boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
221
221
  maxWidth: '100%',
222
222
  '@media screen and (-ms-high-contrast: active)': {
223
223
  border: isFocused ? '1px solid transparent' : 'none'
@@ -228,24 +228,24 @@ export default function baseStyles(validationState, isCompact) {
228
228
  var isFocused = _ref8.isFocused;
229
229
  return _objectSpread(_objectSpread({}, css), {}, {
230
230
  padding: '2px',
231
- color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))",
231
+ color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
232
232
  paddingRight: '2px'
233
233
  });
234
234
  },
235
235
  multiValueRemove: function multiValueRemove(css, _ref9) {
236
236
  var isFocused = _ref9.isFocused;
237
237
  return _objectSpread(_objectSpread({}, css), {}, {
238
- backgroundColor: isFocused && "var(--ds-background-selected-resting, ".concat(R75, ")"),
239
- fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text-highEmphasis, #000)",
238
+ backgroundColor: isFocused && "var(--ds-background-brand, ".concat(R75, ")"),
239
+ fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
240
240
  paddingLeft: '2px',
241
241
  paddingRight: '2px',
242
242
  borderRadius: '0px 2px 2px 0px',
243
243
  ':hover': {
244
- backgroundColor: "var(--ds-background-subtleDanger-hover, ".concat(R75, ")"),
244
+ backgroundColor: "var(--ds-background-danger-hovered, ".concat(R75, ")"),
245
245
  fill: "var(--ds-text-danger, #000)"
246
246
  },
247
247
  ':active': {
248
- backgroundColor: "var(--ds-background-subtleDanger-pressed, ".concat(R75, ")"),
248
+ backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
249
249
  fill: "var(--ds-text-danger, #000)"
250
250
  }
251
251
  });
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "15.2.6",
3
+ "version": "15.2.9",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "15.2.6",
3
+ "version": "15.2.9",
4
4
  "description": "Select allows users to make a single selection or multiple selections from a list of options.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,14 +27,15 @@
27
27
  "@atlaskit/icon": "^21.10.0",
28
28
  "@atlaskit/spinner": "^15.0.0",
29
29
  "@atlaskit/theme": "^12.1.0",
30
- "@atlaskit/tokens": "^0.5.0",
30
+ "@atlaskit/tokens": "^0.7.0",
31
+ "@atlaskit/visually-hidden": "^1.0.0",
31
32
  "@babel/runtime": "^7.0.0",
32
33
  "@emotion/core": "^10.0.9",
33
34
  "@popperjs/core": "^2.9.1",
34
35
  "@types/react-select": "^4.0.13",
35
36
  "focus-trap": "^2.4.5",
36
37
  "memoize-one": "^6.0.0",
37
- "react-fast-compare": "^2.0.1",
38
+ "react-fast-compare": "^3.2.0",
38
39
  "react-node-resolver": "^1.0.1",
39
40
  "react-popper": "^2.2.3",
40
41
  "react-select": "^4.3.1",
@@ -46,11 +47,11 @@
46
47
  "react-dom": "^16.8.0"
47
48
  },
48
49
  "devDependencies": {
49
- "@atlaskit/button": "^16.0.0",
50
+ "@atlaskit/button": "^16.2.0",
50
51
  "@atlaskit/checkbox": "^12.2.0",
51
52
  "@atlaskit/docs": "*",
52
53
  "@atlaskit/drawer": "^7.1.0",
53
- "@atlaskit/form": "^8.4.0",
54
+ "@atlaskit/form": "^8.5.0",
54
55
  "@atlaskit/logo": "^13.5.0",
55
56
  "@atlaskit/modal-dialog": "^12.2.0",
56
57
  "@atlaskit/section-message": "^6.0.0",