@atlaskit/rovo-agent-components 2.0.0 → 2.1.0

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

@@ -1,19 +1,19 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { cx } from '@atlaskit/css';
 import StarIconMigration from '@atlaskit/icon/core/migration/star-starred--star-filled';
 import StarUnstarredIconMigration from '@atlaskit/icon/core/migration/star-unstarred--star';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from './messages';
-var pressableStarIconStyles = xcss({
-  background: 'transparent',
-  padding: 'space.0',
-  height: '24px',
-  width: '24px'
-});
-var hiddenStyles = xcss({
-  opacity: 0
-});
+var styles = {
+  pressableStarIcon: "_bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4t3i1tcg _1bsb1tcg",
+  hidden: "_tzy4idpf"
+};
 export var StarIconButton = function StarIconButton(_ref) {
   var isStarred = _ref.isStarred,
     handleToggle = _ref.handleToggle,
@@ -26,7 +26,7 @@ export var StarIconButton = function StarIconButton(_ref) {
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
   return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: [pressableStarIconStyles, !visible && hiddenStyles],
+    xcss: cx(styles.pressableStarIcon, !visible && styles.hidden),
     onClick: handleToggle,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);

package/dist/esm/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/esm/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';
+var styles = {
+  image: "_5ral1dfr _4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o",
+  banner: "_1bsb1osq",
+  bannerFillSpace: "_1bsb1osq _4t3i1osq _5ral1dfr"
+};
 var AutoDevAvatar = /*#__PURE__*/lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoDevAvatar"*/'./assets/auto-dev');
 });
@@ -83,14 +93,6 @@ 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];
 export var TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
-var imageStyles = xcss({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
 var outOfTheBoxAgentAvatar = {
   decision_director_agent: {
     getRender: function getRender(size) {
@@ -216,14 +218,6 @@ var getAvatarRender = function getAvatarRender(_ref2) {
     color: blueColor
   };
 };
-var bannerStyles = xcss({
-  width: '100%'
-});
-var bannerFillSpaceStyles = xcss({
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover'
-});
 export var AgentBanner = function AgentBanner(_ref3) {
   var agentNamedId = _ref3.agentNamedId,
     agentId = _ref3.agentId,
@@ -238,7 +232,7 @@ export var AgentBanner = function AgentBanner(_ref3) {
     }),
     color = _getAvatarRender.color;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [bannerStyles, fillSpace ? bannerFillSpaceStyles : undefined],
+    xcss: cx(styles.banner, fillSpace ? styles.bannerFillSpace : undefined),
     style: {
       backgroundColor: color.primary,
       height: height ? "".concat(height, "px") : undefined
@@ -250,7 +244,7 @@ export var GeneratedAvatar = function GeneratedAvatar(props) {
     render = _getAvatarRender2.render,
     color = _getAvatarRender2.color;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: imageStyles,
+    xcss: styles.image,
     style: {
       backgroundColor: color.primary
     }

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

@@ -1,37 +1,21 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.compiled.css";
+import * as React from 'react';
+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; }
-import React from 'react';
 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
- */
-var 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%)"
-});
-var 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%)"
-});
-var imageStyles = xcss({
-  objectFit: 'cover',
-  height: '100%',
-  width: '100%'
-});
-var avatarContentContainer = 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"
+};
 export var AgentAvatar = function AgentAvatar(_ref) {
   var imageUrl = _ref.imageUrl,
     _ref$size = _ref.size,
@@ -48,7 +32,7 @@ export var AgentAvatar = function AgentAvatar(_ref) {
   var imgUrl = isForgeAgent && forgeAgentIconUrl ? forgeAgentIconUrl : imageUrl;
   return /*#__PURE__*/React.createElement(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_SIZES[size],
@@ -57,13 +41,13 @@ export var AgentAvatar = function AgentAvatar(_ref) {
     }, showBorder ? {
       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/esm/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/esm/ui/agent-dropdown-menu/index.js

@@ -1,58 +1,48 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["triggerRef"];
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useState } from 'react';
+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';
-var chatToAgentButtonContainer = xcss({
-  width: '100%'
-});
-var chatToAgentButtonWrapper = xcss({
-  display: 'flex',
-  justifyContent: 'center',
-  lineHeight: '20px',
-  fontWeight: 'font.weight.medium'
-});
-var chatPillButtonInlineStyles = xcss({
-  paddingInline: 'space.025'
-});
-var chatPillTextStyles = xcss({
-  wordBreak: 'break-word',
-  textAlign: 'left',
-  whiteSpace: 'pre-wrap'
-});
-var chatPillIconWrapper = xcss({
-  minWidth: '20px',
-  height: '20px'
-});
+var styles = {
+  chatToAgentButtonContainer: "_1bsb1osq",
+  chatToAgentButtonWrapper: "_1e0c1txw _1bah1h6o _k48p1wq8",
+  chatPillButtonInline: "_18zrv77o",
+  chatPillText: "_1nmz1hna _y3gn1e5h _o5721jtm",
+  chatPillIconWrapper: "_1ul9gktf _4t3igktf"
+};
 export var ChatToAgentButton = function ChatToAgentButton(_ref) {
   var onClick = _ref.onClick;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   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 var AgentDropdownMenu = function AgentDropdownMenu(_ref2) {

package/dist/esm/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/esm/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';
-var 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'
-});
+var styles = {
+  count: "_11c81vlj _zulp1b66 _1e0c1txw _4cvr1h6o _bozgv77o"
+};
 export var AgentStarCount = function AgentStarCount(_ref) {
   var starCount = _ref.starCount,
     isLoading = _ref.isLoading;
@@ -21,7 +20,7 @@ export var AgentStarCount = function AgentStarCount(_ref) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: countStyles
+    xcss: styles.count
   }, /*#__PURE__*/React.createElement(StarIcon, {
     LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
     color: "currentColor",

package/dist/esm/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/esm/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';
-var clickableItemStyles = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 'space.050'
-});
-var nameStyles = xcss({
-  justifyContent: 'space-between',
-  alignItems: 'flex-start'
-});
-var descriptionStyles = xcss({
-  marginTop: 'space.0',
-  marginBottom: 'space.100'
-});
+var styles = {
+  clickableItem: "_zulp1b66 _1e0c1txw _4cvr1h6o",
+  name: "_1bah1yb4 _4cvr1y6m",
+  description: "_19pkze3t _otyru2gc",
+  wrapper: "_otyru2gc",
+  tooltipWrapper: "_195gu2gc _1e0c116y _kqswh2mm _94n5v77o",
+  headingWrapper: "_kqswh2mm"
+};
 export var AgentProfileCreator = function AgentProfileCreator(_ref) {
   var creator = _ref.creator,
     onCreatorLinkClick = _ref.onCreatorLinkClick,
@@ -73,24 +71,12 @@ export var AgentProfileCreator = function AgentProfileCreator(_ref) {
   };
   var creatorRender = getCreatorRender();
   return creatorRender ? /*#__PURE__*/React.createElement(Box, {
-    xcss: clickableItemStyles
+    xcss: styles.clickableItem
   }, /*#__PURE__*/React.createElement(RovoIcon, {
     appearance: "brand",
     size: "small"
   }), creatorRender) : null;
 };
-var wrapperStyles = xcss({
-  marginBottom: 'space.100'
-});
-var tooltipWrapperStyles = xcss({
-  display: 'inline-flex',
-  marginInline: 'space.100',
-  position: 'relative',
-  bottom: 'space.025'
-});
-var headingWrapperStyles = xcss({
-  position: 'relative'
-});
 export var AgentProfileInfo = function AgentProfileInfo(_ref2) {
   var agentName = _ref2.agentName,
     agentDescription = _ref2.agentDescription,
@@ -103,18 +89,18 @@ export var AgentProfileInfo = function AgentProfileInfo(_ref2) {
     formatMessage = _useIntl2.formatMessage;
   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"
@@ -124,7 +110,7 @@ export var AgentProfileInfo = function AgentProfileInfo(_ref2) {
     isStarred: isStarred,
     handleToggle: onStarToggle
   })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {
-    xcss: descriptionStyles,
+    xcss: styles.description,
     as: "p"
   }, agentDescription), starCountRender);
 };

package/dist/types/common/ui/chat-pill/index.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
+/// <reference types="react" />
 import { type ButtonProps } from '@atlaskit/button';
 export type ChatPillProps = Omit<ButtonProps, 'iconBefore'> & {
     whiteSpacePreWrap?: boolean;
     renderIcon?: boolean;
 };
-export declare const ChatPill: React.ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
+export declare const ChatPill: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
     whiteSpacePreWrap?: boolean | undefined;
     renderIcon?: boolean | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export type BrowseAgentsPillProps = Omit<ButtonProps, 'iconBefore' | 'children'>;
-export declare const BrowseAgentsPill: React.ForwardRefExoticComponent<BrowseAgentsPillProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ConversationStarterPill: React.ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
+export declare const BrowseAgentsPill: import("react").ForwardRefExoticComponent<BrowseAgentsPillProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ConversationStarterPill: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
     whiteSpacePreWrap?: boolean | undefined;
     renderIcon?: boolean | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/common/ui/link-icon-button/index.d.ts

@@ -1,5 +1,10 @@
-import React, { type KeyboardEvent, type MouseEvent } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag jsx
+ */
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export declare const LinkIconButton: ({ handleCopy, visible, }: {
     handleCopy: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
     visible?: boolean | undefined;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/dist/types/common/ui/star-icon-button/index.d.ts

@@ -1,6 +1,10 @@
-import React, { type KeyboardEvent, type MouseEvent } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export declare const StarIconButton: ({ isStarred, handleToggle, visible, }: {
     isStarred: boolean;
     handleToggle: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
     visible?: boolean | undefined;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/dist/types/ui/agent-avatar/generated-avatars/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type SizeType } from '@atlaskit/avatar';
 export declare const TOTAL_AVATAR_COMBINATIONS: number;
 type GeneratedAvatarProps = {
@@ -19,6 +19,6 @@ export declare const getNumberIdForAvatar: ({ agentIdentityAccountId, agentId, }
 export declare const AgentBanner: ({ agentNamedId, agentId, agentIdentityAccountId, height, fillSpace, }: Pick<GeneratedAvatarProps, "agentIdentityAccountId" | "agentId" | "agentNamedId"> & {
     height?: number | undefined;
     fillSpace?: boolean | undefined;
-}) => React.JSX.Element;
-export declare const GeneratedAvatar: (props: GeneratedAvatarProps) => React.JSX.Element;
+}) => JSX.Element;
+export declare const GeneratedAvatar: (props: GeneratedAvatarProps) => JSX.Element;
 export {};

package/dist/types/ui/agent-avatar/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type SizeType } from '@atlaskit/avatar';
 type AgentAvatarProps = {
     imageUrl?: string;
@@ -12,5 +12,5 @@ type AgentAvatarProps = {
     isForgeAgent?: boolean;
     forgeAgentIconUrl?: string | null;
 };
-export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => React.JSX.Element;
+export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => JSX.Element;
 export {};

package/dist/types/ui/agent-dropdown-menu/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+/// <reference types="react" />
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type ButtonProps, IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
 type ChatToAgentButtonProps = {
     onClick: ButtonProps['onClick'];
 };
-export declare const ChatToAgentButton: ({ onClick }: ChatToAgentButtonProps) => React.JSX.Element;
+export declare const ChatToAgentButton: ({ onClick }: ChatToAgentButtonProps) => JSX.Element;
 type ViewAgentOptionProps = {
     showViewAgentOption: true;
     onViewAgentClick: React.ComponentProps<typeof DropdownItem>['onClick'];
@@ -40,5 +40,5 @@ type AgentDropdownMenuProps = {
     loadPermissionsOnMount?: boolean;
     shouldTriggerStopPropagation?: boolean;
 } & ViewAgentOptionProps & ViewAgentFullProfileProps;
-export declare const AgentDropdownMenu: ({ isAgentCreatedByUser, isAutodevTemplateAgent, onEditAgent, onCopyAgent, onDuplicateAgent, onDeleteAgent, onViewAgentFullProfileClick, isForgeAgent, showViewAgentOption, onViewAgentClick, onDropdownTriggerClick, spacing, appearance, dropdownMenuTestId, doesAgentHaveIdentityAccountId, loadAgentPermissions, loadPermissionsOnMount, shouldTriggerStopPropagation, }: AgentDropdownMenuProps) => React.JSX.Element;
+export declare const AgentDropdownMenu: ({ isAgentCreatedByUser, isAutodevTemplateAgent, onEditAgent, onCopyAgent, onDuplicateAgent, onDeleteAgent, onViewAgentFullProfileClick, isForgeAgent, showViewAgentOption, onViewAgentClick, onDropdownTriggerClick, spacing, appearance, dropdownMenuTestId, doesAgentHaveIdentityAccountId, loadAgentPermissions, loadPermissionsOnMount, shouldTriggerStopPropagation, }: AgentDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types/ui/agent-profile-info/agent-star-count/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 export declare const AgentStarCount: ({ starCount, isLoading, }: {
     starCount: number | null | undefined;
     isLoading: boolean;
-}) => React.JSX.Element | null;
+}) => JSX.Element | null;

package/dist/types/ui/agent-profile-info/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoading: isLoading, }: {
     creator?: {
         type: 'CUSTOMER';
@@ -19,7 +19,7 @@ export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoad
     } | undefined;
     isLoading: boolean;
     onCreatorLinkClick: () => void;
-}) => React.JSX.Element | null;
+}) => JSX.Element | null;
 export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, isStarred, isHidden, onStarToggle, }: {
     agentName: string;
     agentDescription?: string | null | undefined;
@@ -28,4 +28,4 @@ export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRe
     isStarred: boolean;
     isHidden: boolean;
     onStarToggle: () => void;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/dist/types-ts4.5/common/ui/chat-pill/index.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
+/// <reference types="react" />
 import { type ButtonProps } from '@atlaskit/button';
 export type ChatPillProps = Omit<ButtonProps, 'iconBefore'> & {
     whiteSpacePreWrap?: boolean;
     renderIcon?: boolean;
 };
-export declare const ChatPill: React.ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
+export declare const ChatPill: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
     whiteSpacePreWrap?: boolean | undefined;
     renderIcon?: boolean | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export type BrowseAgentsPillProps = Omit<ButtonProps, 'iconBefore' | 'children'>;
-export declare const BrowseAgentsPill: React.ForwardRefExoticComponent<BrowseAgentsPillProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ConversationStarterPill: React.ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
+export declare const BrowseAgentsPill: import("react").ForwardRefExoticComponent<BrowseAgentsPillProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ConversationStarterPill: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "iconBefore"> & {
     whiteSpacePreWrap?: boolean | undefined;
     renderIcon?: boolean | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/common/ui/link-icon-button/index.d.ts

@@ -1,5 +1,10 @@
-import React, { type KeyboardEvent, type MouseEvent } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag jsx
+ */
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export declare const LinkIconButton: ({ handleCopy, visible, }: {
     handleCopy: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
     visible?: boolean | undefined;
-}) => React.JSX.Element;
+}) => JSX.Element;

package/dist/types-ts4.5/common/ui/star-icon-button/index.d.ts

@@ -1,6 +1,10 @@
-import React, { type KeyboardEvent, type MouseEvent } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type KeyboardEvent, type MouseEvent } from 'react';
 export declare const StarIconButton: ({ isStarred, handleToggle, visible, }: {
     isStarred: boolean;
     handleToggle: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
     visible?: boolean | undefined;
-}) => React.JSX.Element;
+}) => JSX.Element;