@atlaskit/rovo-agent-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/rovo-agent-components
 
+## 2.1.0
+
+### Minor Changes
+
+- [#119332](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119332)
+  [`b1b3d91f244e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b1b3d91f244e2) -
+  Migrate package to compiled
+
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/common/ui/chat-pill/index.compiled.css

@@ -0,0 +1,25 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zrv77o{padding-inline:var(--ds-space-025,2px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1nmz1hna{word-break:break-word}
+._1o0zgqwt{border-bottom-right-radius:var(--ds-border-radius-050,2px)}
+._1o9zkb7n{flex-shrink:1}
+._bfhk1j28{background-color:transparent}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._o5721jtm{white-space:pre-wrap}
+._o5721q9c{white-space:nowrap}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vwz47vkz{line-height:1pc}
+._y3gn1e5h{text-align:left}
+._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}

package/dist/cjs/common/ui/chat-pill/index.js

@@ -1,120 +1,92 @@
+/* index.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.ConversationStarterPill = exports.ChatPill = exports.BrowseAgentsPill = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _css = require("@atlaskit/css");
 var _aiAgent = _interopRequireDefault(require("@atlaskit/icon/core/ai-agent"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _chatIcon = require("../chat-icon");
 var _messages = _interopRequireDefault(require("./messages"));
 var _excluded = ["children", "whiteSpacePreWrap", "renderIcon"],
   _excluded2 = ["children", "whiteSpacePreWrap"];
-var conversationStarterPillStyles = (0, _primitives.xcss)({
-  color: 'color.text',
-  padding: 'space.100',
-  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
-  borderRadius: 'border.radius.200',
-  borderBottomRightRadius: "var(--ds-border-radius-050, 2px)",
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  flexShrink: 1,
-  background: 'none',
-  width: '100%',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.pressed'
-  }
-});
-var buttonStyles = (0, _primitives.xcss)({
-  color: 'color.text',
-  padding: 'space.100',
-  borderRadius: 'border.radius.200',
-  borderBottomRightRadius: "var(--ds-border-radius-050, 2px)",
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  flexShrink: 1,
-  backgroundColor: 'color.background.neutral',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.pressed'
-  }
-});
-var buttonInlineStyles = (0, _primitives.xcss)({
-  paddingInline: 'space.025'
-});
-var queryTextStyles = (0, _primitives.xcss)({
-  wordBreak: 'break-word',
-  textAlign: 'left'
-});
-var whiteSpacePreWrapStyles = (0, _primitives.xcss)({
-  whiteSpace: 'pre-wrap'
-});
-var ChatPill = exports.ChatPill = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+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 stylesCompiled = {
+  pillLineHeight: "_vwz47vkz"
+};
+var styles = {
+  conversationStarterPill: "_2rkopd34 _11c81oud _189ee4h9 _1dqonqa1 _1h6dmuej _syaz1fxt _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1o0zgqwt _k48p1wq8 _1bto1l2s _o5721q9c _1o9zkb7n _bfhk1j28 _1bsb1osq _irr315ej _1di6ip91",
+  button: "_2rkopd34 _11c81oud _syaz1fxt _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1o0zgqwt _k48p1wq8 _1bto1l2s _o5721q9c _1o9zkb7n _bfhkm7j4 _irr315ej _1di6ip91",
+  buttonInline: "_18zrv77o",
+  queryText: "_1nmz1hna _y3gn1e5h",
+  whiteSpacePreWrap: "_o5721jtm"
+};
+var ChatPill = exports.ChatPill = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     _ref$whiteSpacePreWra = _ref.whiteSpacePreWrap,
     whiteSpacePreWrap = _ref$whiteSpacePreWra === void 0 ? true : _ref$whiteSpacePreWra,
     _ref$renderIcon = _ref.renderIcon,
     renderIcon = _ref$renderIcon === void 0 ? true : _ref$renderIcon,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
     ref: ref
   }, props, {
-    xcss: buttonStyles
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
-  }, renderIcon ? /*#__PURE__*/_react.default.createElement(_chatIcon.ChatPillIcon, null) : null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [queryTextStyles, whiteSpacePreWrap && whiteSpacePreWrapStyles]
-  }, children)));
+    xcss: styles.buttonInline
+  }, renderIcon ? /*#__PURE__*/React.createElement(_chatIcon.ChatPillIcon, null) : null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.queryText, whiteSpacePreWrap && styles.whiteSpacePreWrap)
+  }, children))));
 });
-var BrowseAgentsPill = exports.BrowseAgentsPill = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var BrowseAgentsPill = exports.BrowseAgentsPill = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
     ref: ref
   }, props, {
-    xcss: buttonStyles
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
-  }, /*#__PURE__*/_react.default.createElement(_aiAgent.default, {
+    xcss: styles.buttonInline
+  }, /*#__PURE__*/React.createElement(_aiAgent.default, {
     color: "currentColor",
     label: ""
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: queryTextStyles
-  }, formatMessage(_messages.default.browseAgentsPillLabel))));
+  }), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.queryText
+  }, formatMessage(_messages.default.browseAgentsPillLabel)))));
 });
-var ConversationStarterPill = exports.ConversationStarterPill = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+var ConversationStarterPill = exports.ConversationStarterPill = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
     _ref2$whiteSpacePreWr = _ref2.whiteSpacePreWrap,
     whiteSpacePreWrap = _ref2$whiteSpacePreWr === void 0 ? true : _ref2$whiteSpacePreWr,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
     ref: ref
   }, props, {
-    xcss: conversationStarterPillStyles
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: styles.conversationStarterPill
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
-  }, /*#__PURE__*/_react.default.createElement(_chatIcon.ChatPillIcon, null), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [queryTextStyles, whiteSpacePreWrap && whiteSpacePreWrapStyles]
-  }, children)));
+    xcss: styles.buttonInline
+  }, /*#__PURE__*/React.createElement(_chatIcon.ChatPillIcon, null), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.queryText, whiteSpacePreWrap && styles.whiteSpacePreWrap)
+  }, children))));
 });

package/dist/cjs/common/ui/link-icon-button/index.compiled.css

@@ -0,0 +1 @@
+._tzy4idpf{opacity:0}

package/dist/cjs/common/ui/link-icon-button/index.js

@@ -1,33 +1,40 @@
+/* index.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.LinkIconButton = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
+var _css = require("@atlaskit/css");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = _interopRequireDefault(require("./messages"));
-var hiddenStyles = (0, _primitives.xcss)({
-  opacity: 0
-});
+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 = {
+  hidden: "_tzy4idpf"
+};
 var LinkIconButton = exports.LinkIconButton = function LinkIconButton(_ref) {
   var handleCopy = _ref.handleCopy,
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [!visible && hiddenStyles]
-  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(!visible && styles.hidden)
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
     type: "button",
     onClick: handleCopy,
     icon: function icon(iconProps) {
-      return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({}, iconProps, {
+      return /*#__PURE__*/React.createElement(_link.default, (0, _extends2.default)({}, iconProps, {
         color: "var(--ds-icon, #44546F)"
       }));
     },

package/dist/cjs/common/ui/star-icon-button/index.compiled.css

@@ -0,0 +1,8 @@
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bsb1tcg{width:24px}
+._4t3i1tcg{height:24px}
+._bfhk1j28{background-color:transparent}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._tzy4idpf{opacity:0}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/cjs/common/ui/star-icon-button/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,24 +7,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StarIconButton = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
+var _css = require("@atlaskit/css");
 var _starStarredStarFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/star-starred--star-filled"));
 var _starUnstarredStar = _interopRequireDefault(require("@atlaskit/icon/core/migration/star-unstarred--star"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = _interopRequireDefault(require("./messages"));
 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 pressableStarIconStyles = (0, _primitives.xcss)({
-  background: 'transparent',
-  padding: 'space.0',
-  height: '24px',
-  width: '24px'
-});
-var hiddenStyles = (0, _primitives.xcss)({
-  opacity: 0
-});
+var styles = {
+  pressableStarIcon: "_bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4t3i1tcg _1bsb1tcg",
+  hidden: "_tzy4idpf"
+};
 var StarIconButton = exports.StarIconButton = function StarIconButton(_ref) {
   var isStarred = _ref.isStarred,
     handleToggle = _ref.handleToggle,
@@ -35,8 +35,8 @@ var StarIconButton = exports.StarIconButton = function StarIconButton(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    xcss: [pressableStarIconStyles, !visible && hiddenStyles],
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    xcss: (0, _css.cx)(styles.pressableStarIcon, !visible && styles.hidden),
     onClick: handleToggle,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
@@ -44,12 +44,12 @@ var StarIconButton = exports.StarIconButton = function StarIconButton(_ref) {
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, isStarred || isHovered ? /*#__PURE__*/_react.default.createElement(_starStarredStarFilled.default, {
+  }, isStarred || isHovered ? /*#__PURE__*/React.createElement(_starStarredStarFilled.default, {
     LEGACY_size: "medium",
     spacing: "spacious",
     label: formatMessage(_messages.default.removeFromFavouritesLabel),
     color: "var(--ds-icon-accent-orange, #E56910)"
-  }) : /*#__PURE__*/_react.default.createElement(_starUnstarredStar.default, {
+  }) : /*#__PURE__*/React.createElement(_starUnstarredStar.default, {
     LEGACY_size: "medium",
     spacing: "spacious",
     label: formatMessage(_messages.default.clickToFavouriteLabel),

package/dist/cjs/ui/agent-avatar/generated-avatars/index.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._5ral1dfr{object-fit:cover}

package/dist/cjs/ui/agent-avatar/generated-avatars/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,12 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getNumberIdForAvatar = exports.TOTAL_AVATAR_COMBINATIONS = exports.GeneratedAvatar = exports.AgentBanner = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _avatar = require("@atlaskit/avatar");
-var _primitives = require("@atlaskit/primitives");
+var _css = require("@atlaskit/css");
+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" != (0, _typeof2.default)(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 = {
+  image: "_5ral1dfr _4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o",
+  banner: "_1bsb1osq",
+  bannerFillSpace: "_1bsb1osq _4t3i1osq _5ral1dfr"
+};
 var AutoDevAvatar = /*#__PURE__*/(0, _react.lazy)(function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoDevAvatar"*/'./assets/auto-dev'));
@@ -135,18 +145,10 @@ var blueColor = {
 var colorList = [yellowColor, purpleColor, greenColor, blueColor];
 var avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
 var TOTAL_AVATAR_COMBINATIONS = exports.TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
-var imageStyles = (0, _primitives.xcss)({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
 var outOfTheBoxAgentAvatar = {
   decision_director_agent: {
     getRender: function getRender(size) {
-      return /*#__PURE__*/_react.default.createElement(DecisionDirectorAvatar, {
+      return /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: greenColor.primary,
         secondaryColor: greenColor.secondary
@@ -156,7 +158,7 @@ var outOfTheBoxAgentAvatar = {
   },
   user_manual_writer_agent: {
     getRender: function getRender(size) {
-      return /*#__PURE__*/_react.default.createElement(MyUserManualAvatar, {
+      return /*#__PURE__*/React.createElement(MyUserManualAvatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: yellowColor.primary,
         secondaryColor: yellowColor.secondary
@@ -166,7 +168,7 @@ var outOfTheBoxAgentAvatar = {
   },
   product_requirements_expert_agent: {
     getRender: function getRender(size) {
-      return /*#__PURE__*/_react.default.createElement(ProductRequirementAvatar, {
+      return /*#__PURE__*/React.createElement(ProductRequirementAvatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: yellowColor.primary,
         secondaryColor: yellowColor.secondary
@@ -176,7 +178,7 @@ var outOfTheBoxAgentAvatar = {
   },
   issue_organizer_agent: {
     getRender: function getRender(size) {
-      return /*#__PURE__*/_react.default.createElement(BacklogBuddyAvatar, {
+      return /*#__PURE__*/React.createElement(BacklogBuddyAvatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: greenColor.primary,
         secondaryColor: greenColor.secondary
@@ -186,7 +188,7 @@ var outOfTheBoxAgentAvatar = {
   },
   it_ops_agent: {
     getRender: function getRender(size) {
-      return /*#__PURE__*/_react.default.createElement(OpsAgentAvatar, {
+      return /*#__PURE__*/React.createElement(OpsAgentAvatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: purpleColor.primary,
         secondaryColor: purpleColor.secondary
@@ -251,7 +253,7 @@ var getAvatarRender = function getAvatarRender(_ref2) {
     var Avatar = avatarList[avatarIndex];
     var color = colorList[colorIndex];
     return {
-      render: /*#__PURE__*/_react.default.createElement(Avatar, {
+      render: /*#__PURE__*/React.createElement(Avatar, {
         size: _avatar.AVATAR_SIZES[size],
         primaryColor: color.primary,
         secondaryColor: color.secondary
@@ -260,7 +262,7 @@ var getAvatarRender = function getAvatarRender(_ref2) {
     };
   }
   return {
-    render: /*#__PURE__*/_react.default.createElement(GenericAvatar, {
+    render: /*#__PURE__*/React.createElement(GenericAvatar, {
       size: _avatar.AVATAR_SIZES[size],
       primaryColor: blueColor.primary,
       secondaryColor: blueColor.secondary
@@ -268,14 +270,6 @@ var getAvatarRender = function getAvatarRender(_ref2) {
     color: blueColor
   };
 };
-var bannerStyles = (0, _primitives.xcss)({
-  width: '100%'
-});
-var bannerFillSpaceStyles = (0, _primitives.xcss)({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover'
-});
 var AgentBanner = exports.AgentBanner = function AgentBanner(_ref3) {
   var agentNamedId = _ref3.agentNamedId,
     agentId = _ref3.agentId,
@@ -289,8 +283,8 @@ var AgentBanner = exports.AgentBanner = function AgentBanner(_ref3) {
       size: 'medium'
     }),
     color = _getAvatarRender.color;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [bannerStyles, fillSpace ? bannerFillSpaceStyles : undefined],
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.banner, fillSpace ? styles.bannerFillSpace : undefined),
     style: {
       backgroundColor: color.primary,
       height: height ? "".concat(height, "px") : undefined
@@ -301,12 +295,12 @@ var GeneratedAvatar = exports.GeneratedAvatar = function GeneratedAvatar(props)
   var _getAvatarRender2 = getAvatarRender(props),
     render = _getAvatarRender2.render,
     color = _getAvatarRender2.color;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: imageStyles,
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.image,
     style: {
       backgroundColor: color.primary
     }
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }, /*#__PURE__*/React.createElement(_react.Suspense, {
     fallback: null
   }, render));
 };

package/dist/cjs/ui/agent-avatar/index.compiled.css

@@ -0,0 +1,9 @@
+._1bah1h6o{justify-content:center}
+._1bsb1lk2{width:95%}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i1lk2{height:95%}
+._4t3i1osq{height:100%}
+._5ral1dfr{object-fit:cover}
+._mkrz1k6g{clip-path:polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)}

package/dist/cjs/ui/agent-avatar/index.js

@@ -1,43 +1,31 @@
+/* index.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.AgentAvatar = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
 var _avatar = require("@atlaskit/avatar");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _generatedAvatars = require("./generated-avatars");
+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; }
 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; }
-/**
- * This solution has been derived from this codepen: https://codepen.io/anyen-ltovn/pen/qBYYzea
- */
-var agentAvatarStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  clipPath: "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)"
-});
-var innerShapeStyles = (0, _primitives.xcss)({
-  height: '95%',
-  width: '95%',
-  clipPath: "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)"
-});
-var imageStyles = (0, _primitives.xcss)({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%'
-});
-var avatarContentContainer = (0, _primitives.xcss)({
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
+var styles = {
+  agentAvatar: "_1e0c1txw _1bah1h6o _4cvr1h6o _mkrz1k6g",
+  image: "_5ral1dfr _4t3i1osq _1bsb1osq",
+  avatarContentContainer: "_1bsb1osq _4t3i1osq _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
+var stylesCompiled = {
+  innerShape: "_4t3i1lk2 _1bsb1lk2 _mkrz1k6g"
+};
 var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
   var imageUrl = _ref.imageUrl,
     _ref$size = _ref.size,
@@ -52,9 +40,9 @@ var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
     isForgeAgent = _ref.isForgeAgent,
     forgeAgentIconUrl = _ref.forgeAgentIconUrl;
   var imgUrl = isForgeAgent && forgeAgentIconUrl ? forgeAgentIconUrl : imageUrl;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
     "aria-label": label,
-    xcss: agentAvatarStyles,
+    xcss: styles.agentAvatar,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       height: _avatar.AVATAR_SIZES[size],
@@ -63,16 +51,16 @@ var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
     }, showBorder ? {
       backgroundColor: '#fff'
     } : {})
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: innerShapeStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: avatarContentContainer
-  }, imgUrl ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([stylesCompiled.innerShape])
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.avatarContentContainer
+  }, imgUrl ? /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "img",
-    xcss: imageStyles,
+    xcss: styles.image,
     src: imgUrl,
     alt: name
-  }) : /*#__PURE__*/_react.default.createElement(_generatedAvatars.GeneratedAvatar, {
+  }) : /*#__PURE__*/React.createElement(_generatedAvatars.GeneratedAvatar, {
     agentId: agentId,
     agentNamedId: agentNamedId,
     agentIdentityAccountId: agentIdentityAccountId,

package/dist/cjs/ui/agent-dropdown-menu/index.compiled.css

@@ -0,0 +1,10 @@
+._18zrv77o{padding-inline:var(--ds-space-025,2px)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._1ul9gktf{min-width:20px}
+._4t3igktf{height:20px}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._o5721jtm{white-space:pre-wrap}
+._y3gn1e5h{text-align:left}