@atlaskit/select 15.2.4 → 15.2.8

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/select
 
+## 15.2.8
+
+### Patch Changes
+
+- [`b2c25c19e38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2c25c19e38) - PopupSelect now uses `@atlaskit/visually-hidden` under the hood.
+- Updated dependencies
+
+## 15.2.7
+
+### Patch Changes
+
+- [`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.
+- [`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.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump react-fast-compare to latest version (3.2.0)
+- Updated dependencies
+
+## 15.2.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.2.5
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
 ## 15.2.4
 
 ### Patch Changes

package/dist/cjs/CheckboxSelect.js

@@ -19,13 +19,15 @@ var _Select = _interopRequireDefault(require("./Select"));
 
 var _inputOptions = require("./components/input-options");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["components"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var CheckboxSelect = function CheckboxSelect(_ref) {
   var components = _ref.components,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["components"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var temp = _objectSpread(_objectSpread({}, components), {}, {
     Option: _inputOptions.CheckboxOption

package/dist/cjs/CountrySelect.js

@@ -17,9 +17,9 @@ var _countries = require("./data/countries");
 
 var _Select = _interopRequireDefault(require("./Select"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // custom option renderer
 var labelCSS = function labelCSS() {

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -45,19 +45,19 @@ var _objects = _interopRequireDefault(require("shallow-equal/objects"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _components = require("./components");
 
 var _styles = _interopRequireDefault(require("../styles"));
 
+var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
+
 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); }
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -119,7 +119,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
-          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N80)
+          color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
         });
       }
     }));
@@ -312,7 +312,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxMenuWidth = _this$props2.maxMenuWidth,
           minMenuWidth = _this$props2.minMenuWidth,
           target = _this$props2.target,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, ["footer", "maxMenuWidth", "minMenuWidth", "target"]);
+          props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var _this$state = _this.state,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,

package/dist/cjs/PopupSelect/components.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultComponents = exports.DummyControl = exports.MenuDialog = void 0;
+exports.defaultComponents = exports.MenuDialog = exports.DummyControl = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,15 +15,17 @@ var _reactSelect = require("react-select");
 
 var _core = require("@emotion/core");
 
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
+var _excluded = ["innerRef", "innerProps"],
+    _excluded2 = ["children", "innerProps"];
 
-/** @jsx jsx */
 var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -32,9 +34,9 @@ var MenuDialog = function MenuDialog(_ref) {
       style = _ref.style;
   return (0, _core.jsx)("div", {
     css: {
-      backgroundColor: (0, _tokens.token)('color.background.overlay', 'white'),
+      backgroundColor: "var(--ds-surface-overlay, white)",
       borderRadius: 4,
-      boxShadow: (0, _tokens.token)('shadow.overlay', "0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A)),
+      boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
       maxWidth: maxWidth,
       minWidth: minWidth,
       zIndex: _constants.layers.modal()
@@ -64,7 +66,7 @@ var DropdownIndicator = function DropdownIndicator() {
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
       innerProps = _ref2.innerProps,
-      props = (0, _objectWithoutProperties2.default)(_ref2, ["innerRef", "innerProps"]);
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return (0, _core.jsx)("div", {
     ref: innerRef,
     css: {
@@ -76,18 +78,7 @@ var Control = function Control(_ref2) {
 };
 
 var DummyControl = function DummyControl(props) {
-  return (0, _core.jsx)("div", {
-    css: {
-      border: 0,
-      clip: 'rect(1px, 1px, 1px, 1px)',
-      height: 1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      whiteSpace: 'nowrap',
-      width: 1
-    }
-  }, (0, _core.jsx)(_reactSelect.components.Control, props));
+  return (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)(_reactSelect.components.Control, props));
 }; // NOTE `props` intentionally omitted from `Fragment`
 // eslint-disable-next-line
 
@@ -97,7 +88,7 @@ exports.DummyControl = DummyControl;
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
       innerProps = _ref3.innerProps,
-      props = (0, _objectWithoutProperties2.default)(_ref3, ["children", "innerProps"]);
+      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   return (0, _core.jsx)("div", innerProps, children);
 };
 

package/dist/cjs/RadioSelect.js

@@ -19,13 +19,15 @@ var _Select = _interopRequireDefault(require("./Select"));
 
 var _inputOptions = require("./components/input-options");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["components"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var RadioSelect = function RadioSelect(_ref) {
   var components = _ref.components,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["components"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({}, props, {
     isMulti: false,
     components: _objectSpread(_objectSpread({}, components), {}, {

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.2.4";
+var packageVersion = "15.2.8";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/index.js

@@ -17,13 +17,14 @@ Object.defineProperty(exports, "DropdownIndicator", {
     return _indicators.DropdownIndicator;
   }
 });
+exports.IndicatorSeparator = void 0;
 Object.defineProperty(exports, "LoadingIndicator", {
   enumerable: true,
   get: function get() {
     return _indicators.LoadingIndicator;
   }
 });
-exports.IndicatorSeparator = exports.MultiValueRemove = void 0;
+exports.MultiValueRemove = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/components/input-options.js

@@ -41,15 +41,18 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
+var _excluded = ["isActive", "isDisabled", "isFocused", "isSelected"],
+    _excluded2 = ["isActive", "isDisabled", "isSelected"],
+    _excluded3 = ["isActive", "isDisabled", "isFocused", "isSelected"],
+    _excluded4 = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
@@ -60,15 +63,15 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       isSelected = props.isSelected;
   var styles = {
     alignItems: 'center',
-    backgroundColor: isFocused ? (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20) : 'transparent',
-    color: isDisabled ? (0, _tokens.token)('color.text.disabled', 'inherit') : 'inherit',
+    backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
+    color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
     paddingBottom: 4,
     paddingLeft: "".concat((0, _constants.gridSize)() * 2, "px"),
     paddingTop: 4,
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat((0, _tokens.token)('color.text.selected', _colors.B400), ";") : '',
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(_colors.B400, ")"), ";") : '',
     ':active': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30)
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
     },
     '@media screen and (-ms-high-contrast: active)': {
       borderLeft: isFocused ? '2px solid transparent' : ''
@@ -89,8 +92,8 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
 
 
 var backgroundColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N0),
-  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.DN10)
+  light: "var(--ds-background-neutral, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
 });
 var transparent = (0, _components.themed)({
   light: 'transparent',
@@ -103,43 +106,43 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
       isDisabled = _ref.isDisabled,
       isFocused = _ref.isFocused,
       isSelected = _ref.isSelected,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["isActive", "isDisabled", "isFocused", "isSelected"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var color = backgroundColor;
 
   if (isDisabled && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.disabled', _colors.B75),
-      dark: (0, _tokens.token)('color.background.disabled', _colors.DN200)
+      light: "var(--ds-background-disabled, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-disabled, ".concat(_colors.DN200, ")")
     });
   } else if (isDisabled) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.disabled', _colors.N20A),
-      dark: (0, _tokens.token)('color.background.disabled', _colors.DN10)
+      light: "var(--ds-background-disabled, ".concat(_colors.N20A, ")"),
+      dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
     });
   } else if (isSelected && isActive) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B75),
-      dark: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B200)
+      light: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isActive) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.subtleBrand.pressed', _colors.B75),
-      dark: (0, _tokens.token)('color.background.subtleBrand.pressed', _colors.B200)
+      light: "var(--ds-background-brand-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isFocused && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
-      dark: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75)
+      light: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
+      dark: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
     });
   } else if (isFocused) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.default', _colors.N0),
-      dark: (0, _tokens.token)('color.background.default', _colors.DN30)
+      light: "var(--ds-surface, ".concat(_colors.N0, ")"),
+      dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
     });
   } else if (isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
-      dark: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B100)
+      light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      dark: "var(--ds-background-brand-bold, ".concat(_colors.B100, ")")
     });
   }
 
@@ -151,21 +154,21 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
   var isActive = _ref2.isActive,
       isDisabled = _ref2.isDisabled,
       isSelected = _ref2.isSelected,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["isActive", "isDisabled", "isSelected"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var color = (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.default', _colors.N0),
-    dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+    light: "var(--ds-surface, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
   });
 
   if (isDisabled && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-      dark: (0, _tokens.token)('color.text.disabled', _colors.DN10)
+      light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+      dark: "var(--ds-text-disabled, ".concat(_colors.DN10, ")")
     });
   } else if (isActive && isSelected && !isDisabled) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.default', _colors.B400),
-      dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+      light: "var(--ds-surface, ".concat(_colors.B400, ")"),
+      dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
     });
   } else if (!isSelected) {
     color = transparent;
@@ -180,25 +183,25 @@ var getBorderColor = function getBorderColor(_ref3) {
       isDisabled = _ref3.isDisabled,
       isFocused = _ref3.isFocused,
       isSelected = _ref3.isSelected,
-      rest = (0, _objectWithoutProperties2.default)(_ref3, ["isActive", "isDisabled", "isFocused", "isSelected"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
 
   if (isDisabled && isSelected) {
-    return (0, _tokens.token)('color.background.disabled', _colors.B400);
+    return "var(--ds-background-disabled, ".concat(_colors.B400, ")");
   } else if (isDisabled) {
-    return (0, _tokens.token)('color.background.disabled', _colors.N100);
+    return "var(--ds-background-disabled, ".concat(_colors.N100, ")");
   } else if (isSelected && isActive) {
-    return (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B400);
+    return "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")");
   } else if (isActive) {
-    return (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400);
+    return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
   } else if (isFocused && isSelected) {
-    return (0, _tokens.token)('color.background.boldBrand.hover', _colors.B400);
+    return "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")");
   } else if (isFocused) {
-    return (0, _tokens.token)('color.border.neutral', _colors.N100);
+    return "var(--ds-border, ".concat(_colors.N100, ")");
   } else if (isSelected) {
-    return (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400);
+    return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
   }
 
-  return (0, _tokens.token)('color.border.neutral', _colors.N100);
+  return "var(--ds-border, ".concat(_colors.N100, ")");
 };
 
 var ControlOption = /*#__PURE__*/function (_Component) {
@@ -246,7 +249,7 @@ var ControlOption = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           innerProps = _this$props.innerProps,
           innerRef = _this$props.innerRef,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, ["getStyles", "Icon", "children", "innerProps", "innerRef"]); // prop assignment
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded4); // prop assignment
 
       var props = _objectSpread(_objectSpread({}, innerProps), {}, {
         onMouseDown: this.onMouseDown,

package/dist/cjs/createSelect.js

@@ -41,13 +41,15 @@ var defaultComponents = _interopRequireWildcard(require("./components"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
+var _excluded = ["styles", "validationState", "spacing", "isMulti"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -117,7 +119,7 @@ function createSelect(WrappedComponent) {
             validationState = _this$props.validationState,
             spacing = _this$props.spacing,
             isMulti = _this$props.isMulti,
-            props = (0, _objectWithoutProperties2.default)(_this$props, ["styles", "validationState", "spacing", "isMulti"]);
+            props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         var isCompact = spacing === 'compact'; // props must be spread first to stop `components` being overridden
 
         return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({

package/dist/cjs/index.js

@@ -5,94 +5,94 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "components", {
+Object.defineProperty(exports, "AsyncCreatableSelect", {
   enumerable: true,
   get: function get() {
-    return _reactSelect.components;
+    return _AsyncCreatableSelect.default;
   }
 });
-Object.defineProperty(exports, "createFilter", {
+Object.defineProperty(exports, "AsyncSelect", {
   enumerable: true,
   get: function get() {
-    return _reactSelect.createFilter;
+    return _AsyncSelect.default;
   }
 });
-Object.defineProperty(exports, "mergeStyles", {
+Object.defineProperty(exports, "CheckboxOption", {
   enumerable: true,
   get: function get() {
-    return _reactSelect.mergeStyles;
+    return _inputOptions.CheckboxOption;
   }
 });
-Object.defineProperty(exports, "makeAsyncSelect", {
+Object.defineProperty(exports, "CheckboxSelect", {
   enumerable: true,
   get: function get() {
-    return _async.makeAsyncSelect;
+    return _CheckboxSelect.default;
   }
 });
-Object.defineProperty(exports, "makeCreatableSelect", {
+Object.defineProperty(exports, "CountrySelect", {
   enumerable: true,
   get: function get() {
-    return _creatable.makeCreatableSelect;
+    return _CountrySelect.default;
   }
 });
-Object.defineProperty(exports, "CheckboxOption", {
+Object.defineProperty(exports, "CreatableSelect", {
   enumerable: true,
   get: function get() {
-    return _inputOptions.CheckboxOption;
+    return _CreatableSelect.default;
   }
 });
-Object.defineProperty(exports, "RadioOption", {
+Object.defineProperty(exports, "PopupSelect", {
   enumerable: true,
   get: function get() {
-    return _inputOptions.RadioOption;
+    return _PopupSelect.default;
   }
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "RadioOption", {
   enumerable: true,
   get: function get() {
-    return _Select.default;
+    return _inputOptions.RadioOption;
   }
 });
-Object.defineProperty(exports, "AsyncSelect", {
+Object.defineProperty(exports, "RadioSelect", {
   enumerable: true,
   get: function get() {
-    return _AsyncSelect.default;
+    return _RadioSelect.default;
   }
 });
-Object.defineProperty(exports, "CheckboxSelect", {
+Object.defineProperty(exports, "components", {
   enumerable: true,
   get: function get() {
-    return _CheckboxSelect.default;
+    return _reactSelect.components;
   }
 });
-Object.defineProperty(exports, "CountrySelect", {
+Object.defineProperty(exports, "createFilter", {
   enumerable: true,
   get: function get() {
-    return _CountrySelect.default;
+    return _reactSelect.createFilter;
   }
 });
-Object.defineProperty(exports, "RadioSelect", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _RadioSelect.default;
+    return _Select.default;
   }
 });
-Object.defineProperty(exports, "CreatableSelect", {
+Object.defineProperty(exports, "makeAsyncSelect", {
   enumerable: true,
   get: function get() {
-    return _CreatableSelect.default;
+    return _async.makeAsyncSelect;
   }
 });
-Object.defineProperty(exports, "AsyncCreatableSelect", {
+Object.defineProperty(exports, "makeCreatableSelect", {
   enumerable: true,
   get: function get() {
-    return _AsyncCreatableSelect.default;
+    return _creatable.makeCreatableSelect;
   }
 });
-Object.defineProperty(exports, "PopupSelect", {
+Object.defineProperty(exports, "mergeStyles", {
   enumerable: true,
   get: function get() {
-    return _PopupSelect.default;
+    return _reactSelect.mergeStyles;
   }
 });