@atlaskit/user-picker 11.0.2 → 11.0.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/user-picker
 
+## 11.0.4
+
+### Patch Changes
+
+- [#119746](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119746)
+  [`e669148287cf3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e669148287cf3) -
+  Internal refactor for compatibility with the latest version of @atlaskit/avatar. The UI remains
+  consistent.
+- Updated dependencies
+
+## 11.0.3
+
+### Patch Changes
+
+- [#120533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120533)
+  [`f1bec731e278f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1bec731e278f) -
+  Adds a `sideEffects` field to ensure this package does not have Compiled styles tree-shaken in the
+  future to avoid an accidental regression.
+
+  This is related to
+  https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
+
 ## 11.0.2
 
 ### Patch Changes

package/analytics/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/analytics.js",
   "module": "../dist/esm/analytics.js",
   "module:es2019": "../dist/es2019/analytics.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/analytics.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 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; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.0.2";
+var packageVersion = "11.0.4";
 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/cjs/components/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/cjs/components/SingleValue.js

@@ -1,48 +1,31 @@
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleValue = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _avatar = require("@atlaskit/avatar");
-var _react = require("@emotion/react");
+require("./SingleValue.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-var _excluded = ["ref"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var avatarItemComponent = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  border: 'none !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  padding: "var(--ds-space-0, 0px)".concat(" !important"),
-  width: 'auto',
-  overflow: 'hidden',
-  minWidth: '100px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > span': {
-    boxSizing: 'border-box'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data;
   if ((0, _utils.isTeam)(data) && data.verified) {
-    return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -53,21 +36,19 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
-  return !isFocused ? (0, _react.jsx)(_select.components.SingleValue, props, (0, _react.jsx)(_avatar.AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
-      src: (0, _utils.getAvatarUrl)(data),
-      appearance: appearance,
-      type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? (0, _react.jsx)(_primitives.Inline, {
-      alignBlock: "center"
-    }, label, (0, _react.jsx)(ElementAfter, props)) : label
-  }, function (_ref) {
-    var ref = _ref.ref,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return (0, _react.jsx)("div", (0, _extends2.default)({
-      css: avatarItemComponent
-    }, props));
-  })) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
+    src: (0, _utils.getAvatarUrl)(data),
+    appearance: appearance,
+    type: (0, _utils.isTeam)(data) && (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.avatarItemText
+  }, (0, _platformFeatureFlags.fg)('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(_compiled.Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.0.2";
+const packageVersion = "11.0.4";
 const 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}$/;
 const 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}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/es2019/components/SingleValue.js

@@ -1,35 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { AvatarItem } from '@atlaskit/avatar';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SingleValue.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam } from './utils';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
-const avatarItemComponent = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  border: 'none !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  padding: `${"var(--ds-space-0, 0px)"} !important`,
-  width: 'auto',
-  overflow: 'hidden',
-  minWidth: '100px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > span': {
-    boxSizing: 'border-box'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 const ElementAfter = props => {
   const {
     data: {
@@ -37,7 +20,7 @@ const ElementAfter = props => {
     }
   } = props;
   if (isTeam(data) && data.verified) {
-    return jsx(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -53,20 +36,19 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
-  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: jsx(SizeableAvatar, {
-      src: getAvatarUrl(data),
-      appearance: appearance,
-      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
-      alignBlock: "center"
-    }, label, jsx(ElementAfter, props)) : label
-  }, ({
-    ref,
-    ...props
-  }) => jsx("div", _extends({
-    css: avatarItemComponent
-  }, props)))) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(SizeableAvatar, {
+    src: getAvatarUrl(data),
+    appearance: appearance,
+    type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItemText
+  }, fg('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

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.2";
+var packageVersion = "11.0.4";
 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/SingleValue.compiled.css

@@ -0,0 +1,14 @@
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1ul953f4{min-width:75pt}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._i0dl1osq{flex-basis:100%}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vwz419ii{line-height:1.4}

package/dist/esm/components/SingleValue.js

@@ -1,41 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ref"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { AvatarItem } from '@atlaskit/avatar';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./SingleValue.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam } from './utils';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline } from '@atlaskit/primitives';
-var avatarItemComponent = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  border: 'none !important',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-  padding: "var(--ds-space-0, 0px)".concat(" !important"),
-  width: 'auto',
-  overflow: 'hidden',
-  minWidth: '100px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > span': {
-    boxSizing: 'border-box'
-  },
-  '&:hover': {
-    width: 'auto',
-    padding: 0,
-    border: 'none'
-  }
-});
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+var styles = {
+  avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
+  avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
+  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+};
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data;
   if (isTeam(data) && data.verified) {
-    return jsx(VerifiedTeamIcon, null);
+    return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
 };
@@ -46,21 +27,19 @@ export var SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
-  return !isFocused ? jsx(components.SingleValue, props, jsx(AvatarItem, {
-    backgroundColor: "transparent",
-    avatar: jsx(SizeableAvatar, {
-      src: getAvatarUrl(data),
-      appearance: appearance,
-      type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
-    }),
-    primaryText: fg('verified-team-in-user-picker') ? jsx(Inline, {
-      alignBlock: "center"
-    }, label, jsx(ElementAfter, props)) : label
-  }, function (_ref) {
-    var ref = _ref.ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-    return jsx("div", _extends({
-      css: avatarItemComponent
-    }, props));
-  })) : null;
+  return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement(SizeableAvatar, {
+    src: getAvatarUrl(data),
+    appearance: appearance,
+    type: isTeam(data) && fg('verified-team-in-user-picker') ? 'team' : 'person'
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.avatarItemTextWrapper])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.avatarItemText
+  }, fg('verified-team-in-user-picker') ? /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center"
+  }, label, /*#__PURE__*/React.createElement(ElementAfter, props)) : label))))) : null;
 };

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

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type Option } from '../types';
 import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
-export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;
+export declare const SingleValue: (props: Props) => JSX.Element | null;

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

@@ -23,7 +23,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 } | {
     MultiValue: typeof MultiValue;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator | null;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
@@ -33,7 +33,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;
@@ -41,7 +41,7 @@ export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPo
 } | {
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;

package/dist/types-ts4.5/components/SingleValue.d.ts

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type Option } from '../types';
 import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
-export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;
+export declare const SingleValue: (props: Props) => JSX.Element | null;

package/dist/types-ts4.5/components/components.d.ts

@@ -23,7 +23,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 } | {
     MultiValue: typeof MultiValue;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator | null;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
@@ -33,7 +33,7 @@ export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: bo
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;
@@ -41,7 +41,7 @@ export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPo
 } | {
     Control: typeof PopupControl;
     DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => import("@emotion/react").jsx.JSX.Element | null;
+    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
     ClearIndicator: typeof ClearIndicator;
     Option: import("react").FC<import("./Option").OptionProps>;
     ValueContainer: typeof SingleValueContainer;

package/option/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/option.js",
   "module": "../dist/esm/option.js",
   "module:es2019": "../dist/es2019/option.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/option.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.0.2",
+	"version": "11.0.4",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,7 +20,9 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"*.compiled.css"
+	],
 	"atlaskit:src": "src/index.ts",
 	"af:exports": {
 		".": "./src/index.ts",
@@ -48,7 +50,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/avatar": "^23.0.0",
+		"@atlaskit/avatar": "^24.0.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/lozenge": "^12.0.0",
@@ -64,6 +66,7 @@
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.2",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",

package/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.compiled.css"
+  ],
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {