@atlaskit/rovo-agent-components 2.0.0 → 2.1.0

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

@@ -1,6 +1,16 @@
-import React, { lazy, Suspense } from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { lazy, Suspense } from 'react';
 import { AVATAR_SIZES } from '@atlaskit/avatar';
-import { Box, xcss } from '@atlaskit/primitives';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  image: "_5ral1dfr _4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o",
+  banner: "_1bsb1osq",
+  bannerFillSpace: "_1bsb1osq _4t3i1osq _5ral1dfr"
+};
 const AutoDevAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoDevAvatar"*/'./assets/auto-dev'));
 const AutoFixAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoFixAvatar"*/'./assets/auto-fix'));
 const AutoReviewAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoReviewAvatar"*/'./assets/auto-review'));
@@ -41,14 +51,6 @@ const blueColor = {
 const colorList = [yellowColor, purpleColor, greenColor, blueColor];
 const avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
 export const TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
-const imageStyles = xcss({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
 const outOfTheBoxAgentAvatar = {
   decision_director_agent: {
     getRender: size => /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
@@ -166,14 +168,6 @@ const getAvatarRender = ({
     color: blueColor
   };
 };
-const bannerStyles = xcss({
-  width: '100%'
-});
-const bannerFillSpaceStyles = xcss({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover'
-});
 export const AgentBanner = ({
   agentNamedId,
   agentId,
@@ -190,7 +184,7 @@ export const AgentBanner = ({
     size: 'medium'
   });
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [bannerStyles, fillSpace ? bannerFillSpaceStyles : undefined],
+    xcss: cx(styles.banner, fillSpace ? styles.bannerFillSpace : undefined),
     style: {
       backgroundColor: color.primary,
       height: height ? `${height}px` : undefined
@@ -203,7 +197,7 @@ export const GeneratedAvatar = props => {
     color
   } = getAvatarRender(props);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: imageStyles,
+    xcss: styles.image,
     style: {
       backgroundColor: color.primary
     }

package/dist/es2019/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/es2019/ui/agent-avatar/index.js

@@ -1,34 +1,18 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { AVATAR_SIZES } from '@atlaskit/avatar';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { GeneratedAvatar } from './generated-avatars';
-
-/**
- * This solution has been derived from this codepen: https://codepen.io/anyen-ltovn/pen/qBYYzea
- */
-const agentAvatarStyles = 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%)`
-});
-const innerShapeStyles = 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%)`
-});
-const imageStyles = xcss({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%'
-});
-const avatarContentContainer = xcss({
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
+const styles = {
+  agentAvatar: "_1e0c1txw _1bah1h6o _4cvr1h6o _mkrz1k6g",
+  image: "_5ral1dfr _4t3i1osq _1bsb1osq",
+  avatarContentContainer: "_1bsb1osq _4t3i1osq _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
+const stylesCompiled = {
+  innerShape: "_4t3i1lk2 _1bsb1lk2 _mkrz1k6g"
+};
 export const AgentAvatar = ({
   imageUrl,
   size = 'medium',
@@ -44,7 +28,7 @@ export const AgentAvatar = ({
   const imgUrl = isForgeAgent && forgeAgentIconUrl ? forgeAgentIconUrl : imageUrl;
   return /*#__PURE__*/React.createElement(Box, {
     "aria-label": label,
-    xcss: agentAvatarStyles,
+    xcss: styles.agentAvatar,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       height: AVATAR_SIZES[size],
@@ -55,13 +39,13 @@ export const AgentAvatar = ({
         backgroundColor: '#fff'
       } : {})
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([stylesCompiled.innerShape])
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: innerShapeStyles
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: avatarContentContainer
+    xcss: styles.avatarContentContainer
   }, imgUrl ? /*#__PURE__*/React.createElement(Box, {
     as: "img",
-    xcss: imageStyles,
+    xcss: styles.image,
     src: imgUrl,
     alt: name
   }) : /*#__PURE__*/React.createElement(GeneratedAvatar, {

package/dist/es2019/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}

package/dist/es2019/ui/agent-dropdown-menu/index.js

@@ -1,34 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button, { IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ChatPillIcon } from '../../common/ui/chat-icon';
 import messages from './messages';
-const chatToAgentButtonContainer = xcss({
-  width: '100%'
-});
-const chatToAgentButtonWrapper = xcss({
-  display: 'flex',
-  justifyContent: 'center',
-  lineHeight: '20px',
-  fontWeight: 'font.weight.medium'
-});
-const chatPillButtonInlineStyles = xcss({
-  paddingInline: 'space.025'
-});
-const chatPillTextStyles = xcss({
-  wordBreak: 'break-word',
-  textAlign: 'left',
-  whiteSpace: 'pre-wrap'
-});
-const chatPillIconWrapper = xcss({
-  minWidth: '20px',
-  height: '20px'
-});
+const styles = {
+  chatToAgentButtonContainer: "_1bsb1osq",
+  chatToAgentButtonWrapper: "_1e0c1txw _1bah1h6o _k48p1wq8",
+  chatPillButtonInline: "_18zrv77o",
+  chatPillText: "_1nmz1hna _y3gn1e5h _o5721jtm",
+  chatPillIconWrapper: "_1ul9gktf _4t3igktf"
+};
 export const ChatToAgentButton = ({
   onClick
 }) => {
@@ -36,20 +26,20 @@ export const ChatToAgentButton = ({
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: chatToAgentButtonContainer
+    xcss: styles.chatToAgentButtonContainer
   }, /*#__PURE__*/React.createElement(Button, {
     testId: "view-agent-modal-chat-to-agent-button",
     shouldFitContainer: true,
     onClick: onClick
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: chatToAgentButtonWrapper
+    xcss: styles.chatToAgentButtonWrapper
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: chatPillButtonInlineStyles
+    xcss: styles.chatPillButtonInline
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: chatPillIconWrapper
+    xcss: styles.chatPillIconWrapper
   }, /*#__PURE__*/React.createElement(ChatPillIcon, null)), /*#__PURE__*/React.createElement(Box, {
-    xcss: chatPillTextStyles
+    xcss: styles.chatPillText
   }, formatMessage(messages.chatToAgentButton))))));
 };
 export const AgentDropdownMenu = ({

package/dist/es2019/ui/agent-profile-info/agent-star-count/index.compiled.css

@@ -0,0 +1,5 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}

package/dist/es2019/ui/agent-profile-info/agent-star-count/index.js

@@ -1,17 +1,16 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import StarIcon from '@atlaskit/icon/utility/migration/star-unstarred--star';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Skeleton from '@atlaskit/skeleton';
 import { messages } from './messages';
 import { formatNumber } from './utils';
-const countStyles = xcss({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  display: 'flex',
-  alignItems: 'center',
-  gap: 'space.050',
-  paddingInlineStart: 'space.025'
-});
+const styles = {
+  count: "_11c81vlj _zulp1b66 _1e0c1txw _4cvr1h6o _bozgv77o"
+};
 export const AgentStarCount = ({
   starCount,
   isLoading
@@ -23,7 +22,7 @@ export const AgentStarCount = ({
     return null;
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: countStyles
+    xcss: styles.count
   }, /*#__PURE__*/React.createElement(StarIcon, {
     LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
     color: "currentColor",

package/dist/es2019/ui/agent-profile-info/index.compiled.css

@@ -0,0 +1,11 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._195gu2gc{margin-inline:var(--ds-space-100,8px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1yb4{justify-content:space-between}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._94n5v77o{bottom:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/es2019/ui/agent-profile-info/index.js

@@ -1,26 +1,24 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
 import { AtlassianIcon, RovoIcon } from '@atlaskit/logo';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 import Skeleton from '@atlaskit/skeleton';
 import Tooltip from '@atlaskit/tooltip';
 import { HiddenIcon } from '../../common/ui/hidden-icon';
 import { StarIconButton } from '../../common/ui/star-icon-button';
 import { messages } from './messages';
-const clickableItemStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 'space.050'
-});
-const nameStyles = xcss({
-  justifyContent: 'space-between',
-  alignItems: 'flex-start'
-});
-const descriptionStyles = xcss({
-  marginTop: 'space.0',
-  marginBottom: 'space.100'
-});
+const styles = {
+  clickableItem: "_zulp1b66 _1e0c1txw _4cvr1h6o",
+  name: "_1bah1yb4 _4cvr1y6m",
+  description: "_19pkze3t _otyru2gc",
+  wrapper: "_otyru2gc",
+  tooltipWrapper: "_195gu2gc _1e0c116y _kqswh2mm _94n5v77o",
+  headingWrapper: "_kqswh2mm"
+};
 export const AgentProfileCreator = ({
   creator,
   onCreatorLinkClick,
@@ -73,24 +71,12 @@ export const AgentProfileCreator = ({
   };
   const creatorRender = getCreatorRender();
   return creatorRender ? /*#__PURE__*/React.createElement(Box, {
-    xcss: clickableItemStyles
+    xcss: styles.clickableItem
   }, /*#__PURE__*/React.createElement(RovoIcon, {
     appearance: "brand",
     size: "small"
   }), creatorRender) : null;
 };
-const wrapperStyles = xcss({
-  marginBottom: 'space.100'
-});
-const tooltipWrapperStyles = xcss({
-  display: 'inline-flex',
-  marginInline: 'space.100',
-  position: 'relative',
-  bottom: 'space.025'
-});
-const headingWrapperStyles = xcss({
-  position: 'relative'
-});
 export const AgentProfileInfo = ({
   agentName,
   agentDescription,
@@ -105,18 +91,18 @@ export const AgentProfileInfo = ({
   } = useIntl();
   return /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
-    xcss: wrapperStyles
+    xcss: styles.wrapper
   }, /*#__PURE__*/React.createElement(Inline, {
-    xcss: nameStyles,
+    xcss: styles.name,
     space: "space.100",
     alignBlock: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: headingWrapperStyles
+    xcss: styles.headingWrapper
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "span",
     size: "xlarge"
   }, agentName), isHidden && /*#__PURE__*/React.createElement(Box, {
-    xcss: tooltipWrapperStyles
+    xcss: styles.tooltipWrapper
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.hiddenTooltip),
     position: "top"
@@ -126,7 +112,7 @@ export const AgentProfileInfo = ({
     isStarred: isStarred,
     handleToggle: onStarToggle
   })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {
-    xcss: descriptionStyles,
+    xcss: styles.description,
     as: "p"
   }, agentDescription), starCountRender);
 };

package/dist/esm/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/esm/common/ui/chat-pill/index.js

@@ -1,66 +1,29 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "whiteSpacePreWrap", "renderIcon"],
   _excluded2 = ["children", "whiteSpacePreWrap"];
-import React from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
 import { useIntl } from 'react-intl-next';
+import { cx } from '@atlaskit/css';
 import AgentIcon from '@atlaskit/icon/core/ai-agent';
-import { Box, Inline, Pressable, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Pressable } from '@atlaskit/primitives/compiled';
 import { ChatPillIcon } from '../chat-icon';
 import messages from './messages';
-var conversationStarterPillStyles = 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 = 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 = xcss({
-  paddingInline: 'space.025'
-});
-var queryTextStyles = xcss({
-  wordBreak: 'break-word',
-  textAlign: 'left'
-});
-var whiteSpacePreWrapStyles = xcss({
-  whiteSpace: 'pre-wrap'
-});
-export var ChatPill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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"
+};
+export var ChatPill = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$whiteSpacePreWra = _ref.whiteSpacePreWrap,
     whiteSpacePreWrap = _ref$whiteSpacePreWra === void 0 ? true : _ref$whiteSpacePreWra,
@@ -70,32 +33,36 @@ export var ChatPill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: ref
   }, props, {
-    xcss: buttonStyles
-  }), /*#__PURE__*/React.createElement(Inline, {
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ax([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
+    xcss: styles.buttonInline
   }, renderIcon ? /*#__PURE__*/React.createElement(ChatPillIcon, null) : null, /*#__PURE__*/React.createElement(Box, {
-    xcss: [queryTextStyles, whiteSpacePreWrap && whiteSpacePreWrapStyles]
-  }, children)));
+    xcss: cx(styles.queryText, whiteSpacePreWrap && styles.whiteSpacePreWrap)
+  }, children))));
 });
-export var BrowseAgentsPill = /*#__PURE__*/React.forwardRef(function (props, ref) {
+export var BrowseAgentsPill = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: ref
   }, props, {
-    xcss: buttonStyles
-  }), /*#__PURE__*/React.createElement(Inline, {
+    xcss: styles.button
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ax([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
+    xcss: styles.buttonInline
   }, /*#__PURE__*/React.createElement(AgentIcon, {
     color: "currentColor",
     label: ""
   }), /*#__PURE__*/React.createElement(Box, {
-    xcss: queryTextStyles
-  }, formatMessage(messages.browseAgentsPillLabel))));
+    xcss: styles.queryText
+  }, formatMessage(messages.browseAgentsPillLabel)))));
 });
-export var ConversationStarterPill = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+export var ConversationStarterPill = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     _ref2$whiteSpacePreWr = _ref2.whiteSpacePreWrap,
     whiteSpacePreWrap = _ref2$whiteSpacePreWr === void 0 ? true : _ref2$whiteSpacePreWr,
@@ -103,11 +70,13 @@ export var ConversationStarterPill = /*#__PURE__*/React.forwardRef(function (_re
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: ref
   }, props, {
-    xcss: conversationStarterPillStyles
-  }), /*#__PURE__*/React.createElement(Inline, {
+    xcss: styles.conversationStarterPill
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ax([stylesCompiled.pillLineHeight])
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: buttonInlineStyles
+    xcss: styles.buttonInline
   }, /*#__PURE__*/React.createElement(ChatPillIcon, null), /*#__PURE__*/React.createElement(Box, {
-    xcss: [queryTextStyles, whiteSpacePreWrap && whiteSpacePreWrapStyles]
-  }, children)));
+    xcss: cx(styles.queryText, whiteSpacePreWrap && styles.whiteSpacePreWrap)
+  }, children))));
 });

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

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

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

@@ -1,13 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
 import LinkIcon from '@atlaskit/icon/core/link';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import messages from './messages';
-var hiddenStyles = xcss({
-  opacity: 0
-});
+var styles = {
+  hidden: "_tzy4idpf"
+};
 export var LinkIconButton = function LinkIconButton(_ref) {
   var handleCopy = _ref.handleCopy,
     _ref$visible = _ref.visible,
@@ -15,7 +19,7 @@ export var LinkIconButton = function LinkIconButton(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    xcss: [!visible && hiddenStyles]
+    xcss: cx(!visible && styles.hidden)
   }, /*#__PURE__*/React.createElement(IconButton, {
     type: "button",
     onClick: handleCopy,

package/dist/esm/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)}