@atlaskit/select 17.0.2 → 17.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 17.0.4
+
+### Patch Changes
+
+- [#58732](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58732) [`a3a08f8f4a03`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3a08f8f4a03) - update aria-describedby attribute to not be undefined
+
+## 17.0.3
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+
 ## 17.0.2
 
 ### Patch Changes

package/dist/cjs/CountrySelect.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("@emotion/react");
 var _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
+/** @jsx jsx */
+
 // custom option renderer
 var labelStyles = (0, _react.css)({
   alignItems: 'center',
@@ -22,9 +24,9 @@ var flagStyles = (0, _react.css)({
 var Opt = function Opt(_ref) {
   var children = _ref.children,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: labelStyles
-  }, /*#__PURE__*/React.createElement("span", {
+  }, (0, _react.jsx)("span", {
     css: flagStyles
   }, icon), children);
 };
@@ -44,7 +46,7 @@ var getOptionValue = function getOptionValue(opt) {
 
 // the text node of the control
 var controlLabel = function controlLabel(opt) {
-  return /*#__PURE__*/React.createElement(Opt, {
+  return (0, _react.jsx)(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
 };
@@ -54,7 +56,7 @@ var optionLabel = function optionLabel(_ref3) {
     code = _ref3.code,
     icon = _ref3.icon,
     name = _ref3.name;
-  return /*#__PURE__*/React.createElement(Opt, {
+  return (0, _react.jsx)(Opt, {
     icon: icon
   }, getOptionLabel({
     abbr: abbr,
@@ -71,7 +73,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 
 // put it all together
 var CountrySelect = function CountrySelect(props) {
-  return /*#__PURE__*/React.createElement(_Select.default, (0, _extends2.default)({
+  return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,

package/dist/cjs/PopupSelect/components.js

@@ -14,6 +14,7 @@ var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["innerRef", "innerProps"];
+/** @jsx jsx */
 // ==============================
 // Styled Components
 // ==============================
@@ -30,7 +31,7 @@ var MenuDialog = exports.MenuDialog = function MenuDialog(_ref) {
     id = _ref.id,
     style = _ref.style,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
     // to remain dynamic.
@@ -55,9 +56,9 @@ var dropdownStyles = (0, _react.css)({
   width: 32
 });
 var DropdownIndicator = function DropdownIndicator() {
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: dropdownStyles
-  }, /*#__PURE__*/React.createElement(_search.default, {
+  }, (0, _react.jsx)(_search.default, {
     label: "open"
   }));
 };
@@ -68,22 +69,22 @@ var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     ref: innerRef,
     css: controlStyles
-  }, /*#__PURE__*/React.createElement(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
+  }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));
 };
 var DummyControl = exports.DummyControl = function DummyControl(props) {
-  return /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement(_reactSelect.components.Control, props));
+  return (0, _react.jsx)(_visuallyHidden.default, null, (0, _react.jsx)(_reactSelect.components.Control, props));
 };
 
 // NOTE `props` intentionally omitted from `Fragment`
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
     innerProps = _ref3.innerProps;
-  return /*#__PURE__*/React.createElement("div", innerProps, children);
+  return (0, _react.jsx)("div", innerProps, children);
 };
 var defaultComponents = exports.defaultComponents = {
   Control: Control,

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "17.0.2";
+var packageVersion = "17.0.4";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/index.js

@@ -28,6 +28,8 @@ var _react = require("@emotion/react");
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _reactSelect = require("react-select");
 var _indicators = require("./indicators");
+/** @jsx jsx */
+
 var disabledStyles = (0, _react.css)({
   display: 'none'
 });
@@ -36,10 +38,10 @@ var enabledStyles = (0, _react.css)({
 });
 var MultiValueRemove = exports.MultiValueRemove = function MultiValueRemove(props) {
   var isDisabled = props.selectProps.isDisabled;
-  return /*#__PURE__*/React.createElement(_reactSelect.components.MultiValueRemove, props, /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)(_reactSelect.components.MultiValueRemove, props, (0, _react.jsx)("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, /*#__PURE__*/React.createElement(_selectClear.default, {
+  }, (0, _react.jsx)(_selectClear.default, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/cjs/components/indicators.js

@@ -13,7 +13,7 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var iconContainerStyles = (0, _react.css)({
   all: 'unset',
   outline: 'revert',
@@ -21,34 +21,33 @@ var iconContainerStyles = (0, _react.css)({
   alignItems: 'center'
 });
 var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
-  return /*#__PURE__*/React.createElement(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+  return (0, _react.jsx)(_reactSelect.components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
-  }), /*#__PURE__*/React.createElement("button", {
+  }), (0, _react.jsx)("button", {
     css: iconContainerStyles,
     type: "button",
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(_selectClear.default, {
+  }, (0, _react.jsx)(_selectClear.default, {
     size: "small",
     label: "clear"
   })));
 };
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/React.createElement(_chevronDown.default, {
+  return (0, _react.jsx)(_reactSelect.components.DropdownIndicator, props, (0, _react.jsx)(_chevronDown.default, {
     label: "open"
   }));
 };
 var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(props) {
   var loadingStyles = (0, _react.css)(props.getStyles('loadingIndicator', props));
   return (
-    /*#__PURE__*/
     // This *must* be constructed this way because this is being consumed by
     // `react-select` and we don't control what it wants.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    React.createElement("div", (0, _extends2.default)({
+    (0, _react.jsx)("div", (0, _extends2.default)({
       css: loadingStyles
-    }, props.innerProps), /*#__PURE__*/React.createElement(_spinner.default, {
+    }, props.innerProps), (0, _react.jsx)(_spinner.default, {
       size: "small"
     }))
   );

package/dist/cjs/components/input-aria-describedby.js

@@ -9,9 +9,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
 var Input = exports.Input = function Input(props) {
+  var ariaDescribedByAttribute;
   var passed_describedby = props.selectProps['aria-describedby'];
-  var describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  if (props['aria-describedby'] && passed_describedby) {
+    ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
+  } else {
+    ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;
+  }
   return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Input, (0, _extends2.default)({}, props, {
-    "aria-describedby": describedby
+    "aria-describedby": ariaDescribedByAttribute
   }));
 };

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

@@ -25,7 +25,7 @@ var _excluded = ["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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
     className = props.className,
@@ -201,15 +201,14 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
       return (
-        /*#__PURE__*/
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        React.createElement("div", (0, _extends2.default)({
+        (0, _react.jsx)("div", (0, _extends2.default)({
           css: styles,
           className: classes,
           ref: innerRef
-        }, props), /*#__PURE__*/React.createElement("div", {
+        }, props), (0, _react.jsx)("div", {
           css: [baseIconStyles,
           // Here we are adding a border to the Checkbox and Radio SVG icons
           // This is an a11y fix for Select only for now but it may be rolled
@@ -226,11 +225,11 @@ var ControlOption = /*#__PURE__*/function (_Component) {
               stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
           }]
-        }, !!Icon ? /*#__PURE__*/React.createElement(Icon, {
+        }, !!Icon ? (0, _react.jsx)(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
-        }) : null), /*#__PURE__*/React.createElement("div", {
+        }) : null), (0, _react.jsx)("div", {
           css: baseOptionStyles
         }, children))
       );
@@ -239,12 +238,12 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   return ControlOption;
 }(_react2.Component);
 var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props) {
-  return /*#__PURE__*/React.createElement(ControlOption, (0, _extends2.default)({
+  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
     Icon: _checkbox.default
   }, props));
 };
 var RadioOption = exports.RadioOption = function RadioOption(props) {
-  return /*#__PURE__*/React.createElement(ControlOption, (0, _extends2.default)({
+  return (0, _react.jsx)(ControlOption, (0, _extends2.default)({
     Icon: _radio.default
   }, props));
 };

package/dist/es2019/CountrySelect.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
 // custom option renderer
@@ -15,9 +17,9 @@ const flagStyles = css({
 const Opt = ({
   children,
   icon
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: labelStyles
-}, /*#__PURE__*/React.createElement("span", {
+}, jsx("span", {
   css: flagStyles
 }, icon), children);
 
@@ -32,7 +34,7 @@ const getOptionLabel = ({
 const getOptionValue = opt => opt.abbr;
 
 // the text node of the control
-const controlLabel = opt => /*#__PURE__*/React.createElement(Opt, {
+const controlLabel = opt => jsx(Opt, {
   icon: opt.icon
 }, opt.abbr.toUpperCase());
 // the text node for an option
@@ -41,7 +43,7 @@ const optionLabel = ({
   code,
   icon,
   name
-}) => /*#__PURE__*/React.createElement(Opt, {
+}) => jsx(Opt, {
   icon: icon
 }, getOptionLabel({
   abbr,
@@ -55,7 +57,7 @@ const formatOptionLabel = (opt, {
 }) => context === 'value' ? controlLabel(opt) : optionLabel(opt);
 
 // put it all together
-const CountrySelect = props => /*#__PURE__*/React.createElement(Select, _extends({
+const CountrySelect = props => jsx(Select, _extends({
   isClearable: false,
   formatOptionLabel: formatOptionLabel,
   getOptionLabel: getOptionLabel,

package/dist/es2019/PopupSelect/components.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
 import { components } from 'react-select';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
@@ -22,7 +24,7 @@ export const MenuDialog = ({
   id,
   style,
   testId
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: [menuDialogStyles,
   // There is not a limited amount of values for the widths, so they need
   // to remain dynamic.
@@ -45,9 +47,9 @@ const dropdownStyles = css({
   textAlign: 'center',
   width: 32
 });
-const DropdownIndicator = () => /*#__PURE__*/React.createElement("div", {
+const DropdownIndicator = () => jsx("div", {
   css: dropdownStyles
-}, /*#__PURE__*/React.createElement(SearchIcon, {
+}, jsx(SearchIcon, {
   label: "open"
 }));
 const controlStyles = css({
@@ -57,19 +59,19 @@ const Control = ({
   innerRef,
   innerProps,
   ...props
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   ref: innerRef,
   css: controlStyles
-}, /*#__PURE__*/React.createElement(components.Control, _extends({}, props, {
+}, jsx(components.Control, _extends({}, props, {
   innerProps: innerProps
 })));
-export const DummyControl = props => /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(components.Control, props));
+export const DummyControl = props => jsx(VisuallyHidden, null, jsx(components.Control, props));
 
 // NOTE `props` intentionally omitted from `Fragment`
 const Menu = ({
   children,
   innerProps
-}) => /*#__PURE__*/React.createElement("div", innerProps, children);
+}) => jsx("div", innerProps, children);
 export const defaultComponents = {
   Control,
   DropdownIndicator,

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "17.0.2";
+const packageVersion = "17.0.4";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/components/index.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { components } from 'react-select';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
@@ -12,10 +13,10 @@ export const MultiValueRemove = props => {
   const {
     isDisabled
   } = props.selectProps;
-  return /*#__PURE__*/React.createElement(components.MultiValueRemove, props, /*#__PURE__*/React.createElement("div", {
+  return jsx(components.MultiValueRemove, props, jsx("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+  }, jsx(SelectClearIcon, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/es2019/components/indicators.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
@@ -10,32 +11,31 @@ const iconContainerStyles = css({
   display: 'flex',
   alignItems: 'center'
 });
-export const ClearIndicator = props => /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, props, {
+export const ClearIndicator = props => jsx(components.ClearIndicator, _extends({}, props, {
   innerProps: {
     ...props.innerProps,
     'aria-hidden': 'false'
   }
-}), /*#__PURE__*/React.createElement("button", {
+}), jsx("button", {
   css: iconContainerStyles,
   type: "button",
   tabIndex: -1
-}, /*#__PURE__*/React.createElement(SelectClearIcon, {
+}, jsx(SelectClearIcon, {
   size: "small",
   label: "clear"
 })));
-export const DropdownIndicator = props => /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(DownIcon, {
+export const DropdownIndicator = props => jsx(components.DropdownIndicator, props, jsx(DownIcon, {
   label: "open"
 }));
 export const LoadingIndicator = props => {
   const loadingStyles = css(props.getStyles('loadingIndicator', props));
   return (
-    /*#__PURE__*/
     // This *must* be constructed this way because this is being consumed by
     // `react-select` and we don't control what it wants.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    React.createElement("div", _extends({
+    jsx("div", _extends({
       css: loadingStyles
-    }, props.innerProps), /*#__PURE__*/React.createElement(Spinner, {
+    }, props.innerProps), jsx(Spinner, {
       size: "small"
     }))
   );

package/dist/es2019/components/input-aria-describedby.js

@@ -2,9 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { components } from 'react-select';
 export const Input = props => {
+  let ariaDescribedByAttribute;
   const passed_describedby = props.selectProps['aria-describedby'];
-  const describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  if (props['aria-describedby'] && passed_describedby) {
+    ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
+  } else {
+    ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;
+  }
   return /*#__PURE__*/React.createElement(components.Input, _extends({}, props, {
-    "aria-describedby": describedby
+    "aria-describedby": ariaDescribedByAttribute
   }));
 };

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
@@ -173,15 +174,14 @@ class ControlOption extends Component {
       ...rest
     });
     return (
-      /*#__PURE__*/
       // These need to remain this way because `react-select` passes props with
       // styles inside, and that must be done dynamically.
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      React.createElement("div", _extends({
+      jsx("div", _extends({
         css: styles,
         className: classes,
         ref: innerRef
-      }, props), /*#__PURE__*/React.createElement("div", {
+      }, props), jsx("div", {
         css: [baseIconStyles,
         // Here we are adding a border to the Checkbox and Radio SVG icons
         // This is an a11y fix for Select only for now but it may be rolled
@@ -201,7 +201,7 @@ class ControlOption extends Component {
             })
           }
         }]
-      }, !!Icon ? /*#__PURE__*/React.createElement(Icon, {
+      }, !!Icon ? jsx(Icon, {
         label: "",
         primaryColor: getPrimaryColor({
           ...this.props,
@@ -211,15 +211,15 @@ class ControlOption extends Component {
           ...this.props,
           ...this.state
         })
-      }) : null), /*#__PURE__*/React.createElement("div", {
+      }) : null), jsx("div", {
         css: baseOptionStyles
       }, children))
     );
   }
 }
-export const CheckboxOption = props => /*#__PURE__*/React.createElement(ControlOption, _extends({
+export const CheckboxOption = props => jsx(ControlOption, _extends({
   Icon: CheckboxIcon
 }, props));
-export const RadioOption = props => /*#__PURE__*/React.createElement(ControlOption, _extends({
+export const RadioOption = props => jsx(ControlOption, _extends({
   Icon: RadioIcon
 }, props));

package/dist/esm/CountrySelect.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react';
 import { groupedCountries } from './data/countries';
 import Select from './Select';
 // custom option renderer
@@ -15,9 +17,9 @@ var flagStyles = css({
 var Opt = function Opt(_ref) {
   var children = _ref.children,
     icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: labelStyles
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: flagStyles
   }, icon), children);
 };
@@ -37,7 +39,7 @@ var getOptionValue = function getOptionValue(opt) {
 
 // the text node of the control
 var controlLabel = function controlLabel(opt) {
-  return /*#__PURE__*/React.createElement(Opt, {
+  return jsx(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
 };
@@ -47,7 +49,7 @@ var optionLabel = function optionLabel(_ref3) {
     code = _ref3.code,
     icon = _ref3.icon,
     name = _ref3.name;
-  return /*#__PURE__*/React.createElement(Opt, {
+  return jsx(Opt, {
     icon: icon
   }, getOptionLabel({
     abbr: abbr,
@@ -64,7 +66,7 @@ var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
 
 // put it all together
 var CountrySelect = function CountrySelect(props) {
-  return /*#__PURE__*/React.createElement(Select, _extends({
+  return jsx(Select, _extends({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,

package/dist/esm/PopupSelect/components.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["innerRef", "innerProps"];
+/** @jsx jsx */
+
 import { components } from 'react-select';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
@@ -24,7 +26,7 @@ export var MenuDialog = function MenuDialog(_ref) {
     id = _ref.id,
     style = _ref.style,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [menuDialogStyles,
     // There is not a limited amount of values for the widths, so they need
     // to remain dynamic.
@@ -49,9 +51,9 @@ var dropdownStyles = css({
   width: 32
 });
 var DropdownIndicator = function DropdownIndicator() {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: dropdownStyles
-  }, /*#__PURE__*/React.createElement(SearchIcon, {
+  }, jsx(SearchIcon, {
     label: "open"
   }));
 };
@@ -62,22 +64,22 @@ var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     ref: innerRef,
     css: controlStyles
-  }, /*#__PURE__*/React.createElement(components.Control, _extends({}, props, {
+  }, jsx(components.Control, _extends({}, props, {
     innerProps: innerProps
   })));
 };
 export var DummyControl = function DummyControl(props) {
-  return /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement(components.Control, props));
+  return jsx(VisuallyHidden, null, jsx(components.Control, props));
 };
 
 // NOTE `props` intentionally omitted from `Fragment`
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
     innerProps = _ref3.innerProps;
-  return /*#__PURE__*/React.createElement("div", innerProps, children);
+  return jsx("div", innerProps, children);
 };
 export var defaultComponents = {
   Control: Control,

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "17.0.2";
+var packageVersion = "17.0.4";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/components/index.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { components } from 'react-select';
 export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
@@ -10,10 +11,10 @@ var enabledStyles = css({
 });
 export var MultiValueRemove = function MultiValueRemove(props) {
   var isDisabled = props.selectProps.isDisabled;
-  return /*#__PURE__*/React.createElement(components.MultiValueRemove, props, /*#__PURE__*/React.createElement("div", {
+  return jsx(components.MultiValueRemove, props, jsx("div", {
     css: isDisabled ? disabledStyles : enabledStyles,
     "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
-  }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+  }, jsx(SelectClearIcon, {
     label: "Clear",
     size: "small",
     primaryColor: "transparent",

package/dist/esm/components/indicators.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { components } from 'react-select';
 import Spinner from '@atlaskit/spinner';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
@@ -14,34 +15,33 @@ var iconContainerStyles = css({
   alignItems: 'center'
 });
 export var ClearIndicator = function ClearIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
+  return jsx(components.ClearIndicator, _objectSpread(_objectSpread({}, props), {}, {
     innerProps: _objectSpread(_objectSpread({}, props.innerProps), {}, {
       'aria-hidden': 'false'
     })
-  }), /*#__PURE__*/React.createElement("button", {
+  }), jsx("button", {
     css: iconContainerStyles,
     type: "button",
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(SelectClearIcon, {
+  }, jsx(SelectClearIcon, {
     size: "small",
     label: "clear"
   })));
 };
 export var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(DownIcon, {
+  return jsx(components.DropdownIndicator, props, jsx(DownIcon, {
     label: "open"
   }));
 };
 export var LoadingIndicator = function LoadingIndicator(props) {
   var loadingStyles = css(props.getStyles('loadingIndicator', props));
   return (
-    /*#__PURE__*/
     // This *must* be constructed this way because this is being consumed by
     // `react-select` and we don't control what it wants.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    React.createElement("div", _extends({
+    jsx("div", _extends({
       css: loadingStyles
-    }, props.innerProps), /*#__PURE__*/React.createElement(Spinner, {
+    }, props.innerProps), jsx(Spinner, {
       size: "small"
     }))
   );

package/dist/esm/components/input-aria-describedby.js

@@ -2,9 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { components } from 'react-select';
 export var Input = function Input(props) {
+  var ariaDescribedByAttribute;
   var passed_describedby = props.selectProps['aria-describedby'];
-  var describedby = props['aria-describedby'] + (passed_describedby ? ' ' + passed_describedby : '');
+  if (props['aria-describedby'] && passed_describedby) {
+    ariaDescribedByAttribute = props['aria-describedby'] + ' ' + passed_describedby;
+  } else {
+    ariaDescribedByAttribute = props['aria-describedby'] || passed_describedby;
+  }
   return /*#__PURE__*/React.createElement(components.Input, _extends({}, props, {
-    "aria-describedby": describedby
+    "aria-describedby": ariaDescribedByAttribute
   }));
 };

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

@@ -13,7 +13,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
@@ -194,15 +195,14 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
       return (
-        /*#__PURE__*/
         // These need to remain this way because `react-select` passes props with
         // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        React.createElement("div", _extends({
+        jsx("div", _extends({
           css: styles,
           className: classes,
           ref: innerRef
-        }, props), /*#__PURE__*/React.createElement("div", {
+        }, props), jsx("div", {
           css: [baseIconStyles,
           // Here we are adding a border to the Checkbox and Radio SVG icons
           // This is an a11y fix for Select only for now but it may be rolled
@@ -219,11 +219,11 @@ var ControlOption = /*#__PURE__*/function (_Component) {
               stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
           }]
-        }, !!Icon ? /*#__PURE__*/React.createElement(Icon, {
+        }, !!Icon ? jsx(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
-        }) : null), /*#__PURE__*/React.createElement("div", {
+        }) : null), jsx("div", {
           css: baseOptionStyles
         }, children))
       );
@@ -232,12 +232,12 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   return ControlOption;
 }(Component);
 export var CheckboxOption = function CheckboxOption(props) {
-  return /*#__PURE__*/React.createElement(ControlOption, _extends({
+  return jsx(ControlOption, _extends({
     Icon: CheckboxIcon
   }, props));
 };
 export var RadioOption = function RadioOption(props) {
-  return /*#__PURE__*/React.createElement(ControlOption, _extends({
+  return jsx(ControlOption, _extends({
     Icon: RadioIcon
   }, props));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",