@atlaskit/user-picker 11.0.9 → 11.0.10

package/dist/es2019/components/SingleValueContainer.js

@@ -1,22 +1,17 @@
+/* SingleValueContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { components } from '@atlaskit/select';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./SingleValueContainer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { BORDER_PADDING } from './styles';
 import ValueContainerWrapper from './ValueContainerWrapper';
-const placeholderIconContainer = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: BORDER_PADDING,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 0,
-  gridArea: '1/1/2/2'
-});
+const valueContainerStyles = {
+  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bvze3t _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+};
+const placeholderIconContainer = null;
+const wrapperStyle = null;
 const showUserAvatar = (inputValue, value) => value && value.data && inputValue === value.label;
 export class SingleValueContainer extends React.Component {
   constructor(...args) {
@@ -34,7 +29,7 @@ export class SingleValueContainer extends React.Component {
         }
       } = this.props;
       if (isFocused || !hasValue) {
-        return jsx(SizeableAvatar, {
+        return /*#__PURE__*/React.createElement(SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
@@ -47,13 +42,9 @@ export class SingleValueContainer extends React.Component {
     _defineProperty(this, "Wrapper", ({
       children
     }) => {
-      return this.onValueContainerClick ?
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: css({
-          flexGrow: 1
-        }),
-        onMouseDown: this.onValueContainerClick
+      return this.onValueContainerClick ? /*#__PURE__*/React.createElement("div", {
+        onMouseDown: this.onValueContainerClick,
+        className: ax(["_16jlkb7n"])
       }, children) : children;
     });
   }
@@ -62,11 +53,13 @@ export class SingleValueContainer extends React.Component {
       children,
       ...valueContainerProps
     } = this.props;
-    return jsx(ValueContainerWrapper, {
+    return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
       isEnabled: this.onValueContainerClick,
       onMouseDown: this.onValueContainerClick
-    }, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
-      css: placeholderIconContainer
+    }, /*#__PURE__*/React.createElement(components.ValueContainer, _extends({}, valueContainerProps, {
+      xcss: valueContainerStyles.root
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_nd5l1kqh _19bv12x7 _vwz4idpf"])
     }, this.renderAvatar()), children));
   }
 }

package/dist/es2019/components/TeamOption/main.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/es2019/components/UserPicker.js

@@ -1,5 +1,7 @@
+/* UserPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ax, ix } from "@compiled/react/runtime";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Select, { CreatableSelect } from '@atlaskit/select';
 import { UFOExperienceState } from '@atlaskit/ufo';

package/dist/es2019/components/components.js

@@ -9,6 +9,8 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
+import Control from './Control';
+
 /**
  * Memoize getComponents to avoid rerenders.
  */
@@ -27,7 +29,8 @@ export const getComponents = memoizeOne((multi, anchor, showClearIndicator) => {
       Option,
       ValueContainer: multi ? MultiValueContainer : SingleValueContainer,
       Input,
-      Menu
+      Menu,
+      Control
     };
   }
 });

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.0.9";
+var packageVersion = "11.0.10";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/ClearIndicator.compiled.css

@@ -0,0 +1,8 @@
+
+._v5641ppt{transition:color .15s,opacity .15s}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._tzy4kb7n{opacity:1}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._30l3s4qr:hover{color:var(--ds-icon-danger,#c9372c)}
+@media (hover:hover) and (pointer:fine){._1mhjidpf{opacity:0}}

package/dist/esm/components/ClearIndicator.js

@@ -1,3 +1,4 @@
+/* ClearIndicator.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,6 +6,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./ClearIndicator.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -18,6 +21,9 @@ var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
     };
   });
 });
+var clearIndicatorStyles = {
+  root: "_v5641ppt _tzy4kb7n _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _30l3s4qr _1mhjidpf"
+};
 export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
   function ClearIndicator() {
     var _this;
@@ -50,7 +56,8 @@ export var ClearIndicator = /*#__PURE__*/function (_React$PureComponent) {
       var Indicator = /*#__PURE__*/React.createElement(components.ClearIndicator, _extends({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
-        })
+        }),
+        xcss: clearIndicatorStyles.root
       }));
       return clearValueLabel ? /*#__PURE__*/React.createElement(React.Suspense, {
         fallback: Indicator

package/dist/esm/components/Control.compiled.css

@@ -0,0 +1,20 @@
+
+._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._19bvidpf{padding-left:0}
+._1a98kb7n:hover .fabric-user-picker__clear-indicator{opacity:1}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._p12f1osq{max-width:100%}
+._u5f3idpf{padding-right:0}
+._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._4cvx1p6i:hover{border-color:var(--ds-border-focused,#388bff)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31gly:hover{background-color:var(--ds-background-danger,#ffeceb)}
+._irr31j9a:hover{background-color:var(--ds-background-input,#fff)}
+._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}

package/dist/esm/components/Control.js

@@ -0,0 +1,20 @@
+/* Control.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Control.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { components } from '@atlaskit/select';
+import { cx } from '@compiled/react';
+var controlStyles = {
+  invalid: "_1h6d1bqt _4cvx1bqt",
+  focused: "_1h6d1p6i _bfhk1j9a _4cvx1p6i _irr31j9a",
+  disabled: "_irr3syzs",
+  subtle: "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31gly",
+  root: "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1h6d1elr _bfhk1j9a _p12f1osq _4cvx1elr _irr31d5g _1a98kb7n"
+};
+var Control = function Control(props) {
+  return /*#__PURE__*/React.createElement(components.Control, _extends({}, props, {
+    xcss: cx(controlStyles.root, (props.selectProps.subtle || props.selectProps.noBorder) && controlStyles.subtle, props.isFocused && controlStyles.focused, props.isInvalid && controlStyles.invalid, props.isDisabled && controlStyles.disabled)
+  }));
+};
+export default Control;

package/dist/esm/components/Input.compiled.css

@@ -0,0 +1,5 @@
+._1ir3kb7n input::-ms-input-placeholder{opacity:1}
+._1ir3kb7n input::placeholder{opacity:1}
+._5ce6131l input::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._5ce6131l input::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._h5gq131l input:-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}

package/dist/esm/components/Input.js

@@ -1,3 +1,4 @@
+/* Input.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,10 +6,15 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Input.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { components } from '@atlaskit/select';
+var inputStyles = {
+  root: "_5ce6131l _1ir3kb7n _h5gq131l"
+};
 export var Input = /*#__PURE__*/function (_React$Component) {
   function Input() {
     var _this;
@@ -60,7 +66,8 @@ export var Input = /*#__PURE__*/function (_React$Component) {
         "aria-labelledby": this.ariaLabelledBy,
         "aria-describedby": this.ariaDescribedBy,
         innerRef: this.props.innerRef,
-        onKeyPress: this.handleKeyPress
+        onKeyPress: this.handleKeyPress,
+        xcss: inputStyles.root
       }));
     }
   }]);

package/dist/esm/components/MultiValueContainer.compiled.css

@@ -0,0 +1,10 @@
+._18m91wug{overflow-y:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1fjgglyw{scrollbar-width:none}
+._1ke8idpf::-webkit-scrollbar{width:0}
+._1reo15vq{overflow-x:hidden}
+._1suq1j28::-webkit-scrollbar{background-color:transparent}
+._c71l1osq{max-height:100%}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._yv0e5bpd{grid-template-columns:auto 1fr}

package/dist/esm/components/MultiValueContainer.js

@@ -1,3 +1,5 @@
+/* MultiValueContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,6 +8,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "innerProps"];
+import "./MultiValueContainer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -17,6 +21,9 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
 import ValueContainerWrapper from './ValueContainerWrapper';
+var valueContainerStyles = {
+  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bv12x7 _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+};
 export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   function MultiValueContainer(props) {
     var _this;
@@ -116,7 +123,9 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, /*#__PURE__*/React.createElement(components.ValueContainer, props, this.renderChildren()));
+      }, /*#__PURE__*/React.createElement(components.ValueContainer, _extends({}, props, {
+        xcss: valueContainerStyles.root
+      }), this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/components/Option.js

@@ -1,4 +1,4 @@
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';

package/dist/esm/components/PopupControl.js

@@ -10,10 +10,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 import React from 'react';
-import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
+import Control from './Control';
 var controlWrapper = css({
   display: 'flex',
   flexDirection: 'column',
@@ -42,7 +42,7 @@ export var PopupControl = /*#__PURE__*/function (_React$PureComponent) {
         css: controlWrapper
       }, jsx("div", {
         css: labelStyle
-      }, popupTitle), jsx(components.Control, this.props));
+      }, popupTitle), jsx(Control, this.props));
     }
   }]);
 }(React.PureComponent);

package/dist/esm/components/SingleValueContainer.compiled.css

@@ -0,0 +1,14 @@
+
+._nd5l1kqh{grid-area:1/1/2/2}._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1fjgglyw{scrollbar-width:none}
+._1ke8idpf::-webkit-scrollbar{width:0}
+._1reo15vq{overflow-x:hidden}
+._1suq1j28::-webkit-scrollbar{background-color:transparent}
+._c71l1osq{max-height:100%}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._vwz4idpf{line-height:0}
+._yv0e5bpd{grid-template-columns:auto 1fr}

package/dist/esm/components/SingleValueContainer.js

@@ -1,3 +1,5 @@
+/* SingleValueContainer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,26 +8,19 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"];
+import "./SingleValueContainer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { components } from '@atlaskit/select';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import React from 'react';
+import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
-import { BORDER_PADDING } from './styles';
 import ValueContainerWrapper from './ValueContainerWrapper';
-var placeholderIconContainer = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingLeft: BORDER_PADDING,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 0,
-  gridArea: '1/1/2/2'
-});
+var valueContainerStyles = {
+  root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bvze3t _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
+};
+var placeholderIconContainer = null;
+var wrapperStyle = null;
 var showUserAvatar = function showUserAvatar(inputValue, value) {
   return value && value.data && inputValue === value.label;
 };
@@ -47,7 +42,7 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
         value = _this$props$selectPro.value,
         placeholderAvatar = _this$props$selectPro.placeholderAvatar;
       if (isFocused || !hasValue) {
-        return jsx(SizeableAvatar, {
+        return /*#__PURE__*/React.createElement(SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
@@ -59,13 +54,9 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     _defineProperty(_this, "Wrapper", function (_ref) {
       var children = _ref.children;
-      return _this.onValueContainerClick ?
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: css({
-          flexGrow: 1
-        }),
-        onMouseDown: _this.onValueContainerClick
+      return _this.onValueContainerClick ? /*#__PURE__*/React.createElement("div", {
+        onMouseDown: _this.onValueContainerClick,
+        className: ax(["_16jlkb7n"])
       }, children) : children;
     });
     return _this;
@@ -77,11 +68,13 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = _objectWithoutProperties(_this$props2, _excluded);
-      return jsx(ValueContainerWrapper, {
+      return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
-        css: placeholderIconContainer
+      }, /*#__PURE__*/React.createElement(components.ValueContainer, _extends({}, valueContainerProps, {
+        xcss: valueContainerStyles.root
+      }), /*#__PURE__*/React.createElement("div", {
+        className: ax(["_nd5l1kqh _19bv12x7 _vwz4idpf"])
       }, this.renderAvatar()), children));
     }
   }]);

package/dist/esm/components/TeamOption/main.js

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/esm/components/UserPicker.js

@@ -1,3 +1,4 @@
+/* UserPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,6 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ax, ix } from "@compiled/react/runtime";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }

package/dist/esm/components/components.js

@@ -12,6 +12,8 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
+import Control from './Control';
+
 /**
  * Memoize getComponents to avoid rerenders.
  */
@@ -30,7 +32,8 @@ export var getComponents = memoizeOne(function (multi, anchor, showClearIndicato
       Option: Option,
       ValueContainer: multi ? MultiValueContainer : SingleValueContainer,
       Input: Input,
-      Menu: Menu
+      Menu: Menu,
+      Control: Control
     };
   }
 });

package/dist/types/components/BaseUserPicker.d.ts

@@ -65,7 +65,11 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
-    fieldId: string | null;
+    fieldId: string | null; /**
+     * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
+     * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
+     * It may be removed in a future minor or patch when a longer-term workaround is found.
+     */
     options?: OptionData[] | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -94,6 +98,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;

package/dist/types/components/ClearIndicator.d.ts

@@ -1,6 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type ClearIndicatorProps } from '@atlaskit/select';
 export declare class ClearIndicator extends React.PureComponent<ClearIndicatorProps<any>> {
     private handleMouseDown;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

package/dist/types/components/Control.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ControlProps } from '@atlaskit/select';
+declare const Control: (props: ControlProps<any>) => JSX.Element;
+export default Control;

package/dist/types/components/Input.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type AriaAttributes } from 'react';
 import { type OptionType, type SelectProps } from '@atlaskit/select';
 import { type AriaAttributesType } from '../types';
@@ -18,5 +22,5 @@ export declare class Input extends React.Component<Props & AriaAttributes> {
      */
     get ariaLabelledBy(): AriaAttributesType;
     get ariaDescribedBy(): AriaAttributesType;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

package/dist/types/components/MultiValueContainer.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type MultiValueProps } from '@atlaskit/select';
 import React from 'react';
 import { type Option, type User } from '../types';
@@ -26,6 +30,6 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private addPlaceholder;
     private renderChildren;
     onValueContainerClick: any;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/types/components/PopupUserPicker.d.ts

@@ -49,6 +49,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -103,6 +104,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     autoFocus?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     closeMenuOnScroll?: boolean | EventListener | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     inputId?: string | undefined;
     isClearable?: boolean | undefined;
     isInvalid?: boolean | undefined;

package/dist/types/components/SingleValueContainer.d.ts

@@ -2,15 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ValueContainerProps } from '@atlaskit/select';
-import { jsx } from '@emotion/react';
 import React from 'react';
+import { type ValueContainerProps } from '@atlaskit/select';
 import { type Option, type User } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
     onValueContainerClick: any;
     Wrapper: ({ children }: {
         children: React.ReactElement;
-    }) => jsx.JSX.Element;
-    render(): jsx.JSX.Element;
+    }) => JSX.Element;
+    render(): JSX.Element;
 }

package/dist/types/components/UserPicker.d.ts

@@ -8,7 +8,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
         isMulti: boolean;
     };
     componentDidMount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -40,6 +40,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -77,7 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnClick?: boolean | undefined;
     strategy?: "absolute" | "fixed" | undefined;
     showClearIndicator?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

package/dist/types/components/components.d.ts

@@ -29,7 +29,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
     Input: typeof Input;
     Menu: typeof Menu;
-    Control?: undefined;
+    Control: (props: import("@atlaskit/select").ControlProps<any>) => JSX.Element;
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;