@atlaskit/smart-card 43.30.0 → 43.31.0

package/dist/es2019/view/HoverCard/components/CustomPopupContainer.js

@@ -18,7 +18,10 @@ const CustomPopupContainer = /*#__PURE__*/React.forwardRef(({
  * Factory function to create a CustomPopupContainer with a specific z-index
  */
 export const createCustomPopupContainer = zIndex => {
-  return /*#__PURE__*/React.forwardRef(({
+  return /*#__PURE__*/React.forwardRef(
+  // FIXME: ...props spreads all props to the div, including isReferenceHidden, which is not a valid prop for a div.
+  // Find another way but adding exceptions with _, __, ___ etc.
+  ({
     children,
     shouldFitContainer: _,
     shouldRenderToParent: __,

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -193,6 +193,7 @@ export const HoverCardComponent = ({
       onMouseLeave: initHideCard,
       cardState: linkState,
       onActionClick,
+      onDismiss: hideCard,
       onResolve: update,
       renderers,
       actionOptions,
@@ -206,7 +207,7 @@ export const HoverCardComponent = ({
       id: id,
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
-  }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
+  }, [initShowCard, initHideCard, linkState, onActionClick, hideCard, renderers, actionOptions, url, id, hoverPreviewOptions]);
   const handleKeyDown = useCallback(e => {
     if (e.key === ' ') {
       e.preventDefault();

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -3,7 +3,8 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { AnalyticsContext, useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { componentWithCondition, functionUnionWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -21,7 +22,37 @@ import HoverCardForbiddenView from './views/forbidden';
 import HoverCardResolvedView from './views/resolved';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
+import RovoUnauthorisedView from './views/unauthorised/RovoUnauthorisedView';
 export const hoverCardClassName = 'smart-links-hover-preview';
+const useIsResolvedView = ({
+  cardState,
+  hoverPreviewOptions
+}) => {
+  var _hoverPreviewOptions$;
+  return !(hoverPreviewOptions !== null && hoverPreviewOptions !== void 0 && (_hoverPreviewOptions$ = hoverPreviewOptions.render) !== null && _hoverPreviewOptions$ !== void 0 && _hoverPreviewOptions$.call(hoverPreviewOptions)) && cardState.status === 'resolved';
+};
+const useServices = ({
+  url
+}) => {
+  const linkState = useSmartCardState(url);
+  const services = getServices(linkState.details);
+  return services;
+};
+const useIsUnauthorisedView = ({
+  cardState,
+  url,
+  hoverPreviewOptions
+}) => {
+  var _hoverPreviewOptions$2;
+  const services = useServices({
+    url
+  });
+  return !(hoverPreviewOptions !== null && hoverPreviewOptions !== void 0 && (_hoverPreviewOptions$2 = hoverPreviewOptions.render) !== null && _hoverPreviewOptions$2 !== void 0 && _hoverPreviewOptions$2.call(hoverPreviewOptions)) && cardState.status === 'unauthorized' && Boolean(services === null || services === void 0 ? void 0 : services.length);
+};
+const useIsShowPreauthBetterHovercard = props => {
+  const rovoConfig = useRovoConfig();
+  return Boolean(useIsUnauthorisedView(props) && (rovoConfig === null || rovoConfig === void 0 ? void 0 : rovoConfig.isRovoEnabled) && expValEquals('platform_sl_3p_preauth_better_hovercard', 'isEnabled', true));
+};
 const HoverCardContent = ({
   id = '',
   cardState,
@@ -31,6 +62,7 @@ const HoverCardContent = ({
   url,
   onMouseEnter,
   onMouseLeave,
+  onDismiss,
   actionOptions,
   hoverPreviewOptions,
   showRovoResolvedView
@@ -135,82 +167,174 @@ const HoverCardContent = ({
     children: null
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);
-  const getCardView = cardState => {
-    var _hoverPreviewOptions$;
-    const overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : (_hoverPreviewOptions$ = hoverPreviewOptions.render) === null || _hoverPreviewOptions$ === void 0 ? void 0 : _hoverPreviewOptions$.call(hoverPreviewOptions);
-    if (overrideView) {
-      return overrideView;
-    }
-    if (cardState.status === 'errored' && fg('navx-2478-sl-fix-hover-card-unresolved-view')) {
+  const useIsResolvedViewGated = functionUnionWithCondition(() => fg('platform_sl_3p_preauth_better_hovercard_killswitch'), useIsResolvedView, () => undefined);
+  const useIsUnauthorisedViewGated = functionUnionWithCondition(() => fg('platform_sl_3p_preauth_better_hovercard_killswitch'), useIsUnauthorisedView, () => undefined);
+  const useIsShowPreauthBetterHovercardGated = functionUnionWithCondition(() => fg('platform_sl_3p_preauth_better_hovercard_killswitch'), useIsShowPreauthBetterHovercard, () => undefined);
+  const isResolved = useIsResolvedViewGated({
+    cardState,
+    hoverPreviewOptions
+  });
+  const isUnauthorised = useIsUnauthorisedViewGated({
+    cardState,
+    url,
+    hoverPreviewOptions
+  });
+  const showPreauthBetterHovercard = useIsShowPreauthBetterHovercardGated({
+    cardState,
+    url,
+    hoverPreviewOptions
+  });
+  if (fg('platform_sl_3p_preauth_better_hovercard_killswitch')) {
+    const cardView = (_hoverPreviewOptions$3 => {
+      const overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : (_hoverPreviewOptions$3 = hoverPreviewOptions.render) === null || _hoverPreviewOptions$3 === void 0 ? void 0 : _hoverPreviewOptions$3.call(hoverPreviewOptions);
+      if (overrideView) {
+        return overrideView;
+      }
+      if (cardState.status === 'errored' && fg('navx-2478-sl-fix-hover-card-unresolved-view')) {
+        return null;
+      }
+      if (fg('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
+        return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+          flexibleCardProps: flexibleCardProps,
+          titleBlockProps: titleBlockProps
+        });
+      }
+      if (isUnauthorised) {
+        if (showPreauthBetterHovercard) {
+          return /*#__PURE__*/React.createElement(RovoUnauthorisedView, {
+            extensionKey: extensionKey,
+            id: id,
+            flexibleCardProps: flexibleCardProps,
+            onDismiss: onDismiss,
+            url: url
+          });
+        }
+        return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+          extensionKey: extensionKey,
+          id: id,
+          flexibleCardProps: flexibleCardProps,
+          url: url
+        });
+      }
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
+        return /*#__PURE__*/React.createElement(HoverCardForbiddenView, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+      if (isResolved) {
+        return /*#__PURE__*/React.createElement(HoverCardResolvedView, _extends({}, fg('platform_sl_3p_auth_rovo_action_kill_switch') ? {
+          actionOptions,
+          showRovoResolvedView
+        } : undefined, {
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        }));
+      }
       return null;
-    }
-    if (fg('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
-      return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
-        flexibleCardProps: flexibleCardProps,
-        titleBlockProps: titleBlockProps
-      });
-    }
-    if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
-      return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
-        extensionKey: extensionKey,
-        id: id,
-        flexibleCardProps: flexibleCardProps,
-        url: url
-      });
-    }
-    if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
-      return /*#__PURE__*/React.createElement(HoverCardForbiddenView, {
-        flexibleCardProps: flexibleCardProps
-      });
-    }
-    if (cardState.status === 'resolved') {
-      return /*#__PURE__*/React.createElement(HoverCardResolvedView, _extends({}, fg('platform_sl_3p_auth_rovo_action_kill_switch') ? {
-        actionOptions,
-        showRovoResolvedView
-      } : undefined, {
-        cardState: cardState,
-        extensionKey: extensionKey,
-        flexibleCardProps: flexibleCardProps,
-        isAISummaryEnabled: isAISummaryEnabled,
-        onActionClick: onActionClick,
-        titleBlockProps: titleBlockProps,
-        url: url
-      }));
-    }
-    return null;
-  };
-  const cardView = getCardView(cardState);
-  return cardView ? /*#__PURE__*/React.createElement(ContentContainer, {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClickStopPropagation,
-    isAIEnabled: isAISummaryEnabled,
-    url: url
-  }, cardView) : null;
+    })();
+    return cardView ? /*#__PURE__*/React.createElement(ContentContainer, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClickStopPropagation,
+      widthAppearance: showPreauthBetterHovercard ? 'slim' : undefined,
+      isAIEnabled: isAISummaryEnabled,
+      url: url
+    }, cardView) : null;
+  } else {
+    const getCardView = cardState => {
+      var _hoverPreviewOptions$4;
+      const overrideView = hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : (_hoverPreviewOptions$4 = hoverPreviewOptions.render) === null || _hoverPreviewOptions$4 === void 0 ? void 0 : _hoverPreviewOptions$4.call(hoverPreviewOptions);
+      if (overrideView) {
+        return overrideView;
+      }
+      if (cardState.status === 'errored' && fg('navx-2478-sl-fix-hover-card-unresolved-view')) {
+        return null;
+      }
+      if (fg('navx-2478-sl-fix-hover-card-unresolved-view') ? cardState.status === 'resolving' || cardState.metadataStatus === 'pending' : cardState.metadataStatus === 'pending') {
+        return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+          flexibleCardProps: flexibleCardProps,
+          titleBlockProps: titleBlockProps
+        });
+      }
+      if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
+        return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+          extensionKey: extensionKey,
+          id: id,
+          flexibleCardProps: flexibleCardProps,
+          url: url
+        });
+      }
+      if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
+        return /*#__PURE__*/React.createElement(HoverCardForbiddenView, {
+          flexibleCardProps: flexibleCardProps
+        });
+      }
+      if (cardState.status === 'resolved') {
+        return /*#__PURE__*/React.createElement(HoverCardResolvedView, _extends({}, fg('platform_sl_3p_auth_rovo_action_kill_switch') ? {
+          actionOptions,
+          showRovoResolvedView
+        } : undefined, {
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        }));
+      }
+      return null;
+    };
+    const cardView = getCardView(cardState);
+    return cardView ? /*#__PURE__*/React.createElement(ContentContainer, {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClickStopPropagation,
+      isAIEnabled: isAISummaryEnabled,
+      url: url
+    }, cardView) : null;
+  }
 };
 const HoverCardContentWithViewVariant = props => {
-  var _props$cardState2, _props$cardState3;
+  const {
+    cardState,
+    actionOptions
+  } = props;
   const rovoConfig = useRovoConfig();
-  const showRovoResolvedView = useMemo(() => {
-    var _props$cardState;
-    return (props === null || props === void 0 ? void 0 : (_props$cardState = props.cardState) === null || _props$cardState === void 0 ? void 0 : _props$cardState.status) === 'resolved' && (props === null || props === void 0 ? void 0 : props.cardState.details) && extractRovoChatAction({
-      response: props === null || props === void 0 ? void 0 : props.cardState.details,
-      rovoConfig,
-      actionOptions: props === null || props === void 0 ? void 0 : props.actionOptions
-    }) !== undefined;
-  }, [props === null || props === void 0 ? void 0 : props.actionOptions, props === null || props === void 0 ? void 0 : (_props$cardState2 = props.cardState) === null || _props$cardState2 === void 0 ? void 0 : _props$cardState2.details, props === null || props === void 0 ? void 0 : (_props$cardState3 = props.cardState) === null || _props$cardState3 === void 0 ? void 0 : _props$cardState3.status, rovoConfig]);
+  const isResolved = useIsResolvedView(props);
+  const showPreauthBetterHovercard = useIsShowPreauthBetterHovercard(props);
+  const showRovoResolvedView = useMemo(() => isResolved && cardState.details && extractRovoChatAction({
+    response: cardState.details,
+    rovoConfig,
+    actionOptions
+  }) !== undefined, [actionOptions, cardState.details, rovoConfig, isResolved]);
   const data = useMemo(() => {
-    const viewVariant = showRovoResolvedView && expValEqualsNoExposure('platform_sl_3p_auth_rovo_action', 'isEnabled', true) ? 'rovo-resolved-view' : 'default';
+    let viewVariant = 'default';
+    if (showRovoResolvedView && expValEqualsNoExposure('platform_sl_3p_auth_rovo_action', 'isEnabled', true)) {
+      viewVariant = 'rovo-resolved-view';
+    } else if (showPreauthBetterHovercard) {
+      viewVariant = 'rovo-unauthorised-view';
+    }
     return {
       attributes: {
         viewVariant
       }
     };
-  }, [showRovoResolvedView]);
+  }, [showRovoResolvedView, showPreauthBetterHovercard]);
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: data
   }, /*#__PURE__*/React.createElement(HoverCardContent, _extends({}, props, {
     showRovoResolvedView: showRovoResolvedView
   })));
 };
-export default componentWithFG('platform_sl_3p_auth_rovo_action_kill_switch', HoverCardContentWithViewVariant, HoverCardContent);
+export default componentWithCondition(() => {
+  // We need to read both of them to sutisfy some of the tests that expect both to be checked.
+  const flagA = fg('platform_sl_3p_preauth_better_hovercard_killswitch');
+  const flagB = fg('platform_sl_3p_auth_rovo_action_kill_switch');
+  return flagA || flagB;
+}, HoverCardContentWithViewVariant, HoverCardContent);

package/dist/es2019/view/HoverCard/components/views/unauthorised/RovoUnauthorisedView.compiled.css

@@ -0,0 +1,16 @@
+
+._zulputpp{gap:var(--ds-space-150,9pt)}._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._4cvr1h6o{align-items:center}
+._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._qrwq1mok{border-top-right-radius:var(--ds-radius-large,8px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/es2019/view/HoverCard/components/views/unauthorised/RovoUnauthorisedView.js

@@ -0,0 +1,125 @@
+/* RovoUnauthorisedView.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./RovoUnauthorisedView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { IconTile } from '@atlaskit/icon';
+import AiSparkleIcon from '@atlaskit/icon/core/ai-sparkle';
+import AppSwitcherIcon from '@atlaskit/icon/core/app-switcher';
+import GlobeIcon from '@atlaskit/icon/core/globe';
+import SearchIcon from '@atlaskit/icon/core/search';
+import { extractSmartLinkProvider } from '@atlaskit/link-extractors';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { CardDisplay } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useSmartCardActions } from '../../../../../state/actions';
+const ROVO_FEATURES = [{
+  icon: GlobeIcon,
+  appearance: 'blue',
+  titleMessage: messages.rovo_unauthorised_feature_document_summaries_title,
+  descMessage: messages.rovo_unauthorised_feature_document_summaries_desc,
+  testIdSuffix: 'document-summaries'
+}, {
+  icon: SearchIcon,
+  appearance: 'purple',
+  titleMessage: messages.rovo_unauthorised_feature_related_content_title,
+  descMessage: messages.rovo_unauthorised_feature_related_content_desc,
+  testIdSuffix: 'related-content'
+}, {
+  icon: AiSparkleIcon,
+  appearance: 'orange',
+  titleMessage: messages.rovo_unauthorised_feature_smart_suggestions_title,
+  descMessage: messages.rovo_unauthorised_feature_smart_suggestions_desc,
+  testIdSuffix: 'smart-suggestions'
+}, {
+  icon: AppSwitcherIcon,
+  appearance: 'teal',
+  titleMessage: messages.rovo_unauthorised_feature_cross_reference_title,
+  descMessage: messages.rovo_unauthorised_feature_cross_reference_desc,
+  testIdSuffix: 'cross-reference'
+}];
+const layoutStyles = {
+  header: "_bfhkomb0 _syaz15cr _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _13li1mok _qrwq1mok",
+  body: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
+  footer: "_19pkpxbi _ca0qutpp",
+  footerActions: "_zulputpp _1e0c1txw _4cvr1h6o _1bahesu3 _1n261g80"
+};
+const RovoUnauthorisedView = ({
+  id = '',
+  flexibleCardProps,
+  onDismiss,
+  testId = 'hover-card-rovo-unauthorised-view',
+  url
+}) => {
+  const providerName = useMemo(() => {
+    var _extractSmartLinkProv;
+    return (_extractSmartLinkProv = extractSmartLinkProvider(flexibleCardProps.cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text;
+  }, [flexibleCardProps.cardState.details]);
+  const {
+    authorize
+  } = useSmartCardActions(id, url);
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const handleAuthorize = useCallback(() => {
+    if (authorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, fireEvent]);
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.header
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: "medium",
+    color: "color.text.inverse"
+  }, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.rovo_unauthorised_title, {
+    values: {
+      context: providerName
+    }
+  })) : /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_unauthorised_title_no_provider))), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.body
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200"
+  }, ROVO_FEATURES.map(feature => /*#__PURE__*/React.createElement(Inline, {
+    key: feature.testIdSuffix,
+    space: "space.100",
+    alignBlock: "center",
+    testId: `${testId}-feature-row-${feature.testIdSuffix}`
+  }, /*#__PURE__*/React.createElement(IconTile, {
+    icon: feature.icon,
+    label: '',
+    appearance: feature.appearance,
+    size: "medium",
+    testId: `${testId}-feature-${feature.testIdSuffix}`
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.025"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    weight: "bold"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, feature.titleMessage)), /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtlest"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, feature.descMessage)))))), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.footer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.footerActions
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onDismiss,
+    testId: `${testId}-not-now`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_unauthorised_not_now)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: handleAuthorize,
+    testId: `${testId}-connect-account`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_unauthorised_connect_account)))))));
+};
+export default RovoUnauthorisedView;

package/dist/es2019/view/InlineCard/common/action-button/index.compiled.css

@@ -1,3 +1,7 @@
+
+._1s7zia51{border-right:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._x3doia51{border-top:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._13liidpf{border-top-left-radius:0}
 ._13lilb4i{border-top-left-radius:var(--ds-radius-xsmall,2px)}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
@@ -7,6 +11,7 @@
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1y1m1u8q{background-clip:padding-box}
 ._2hwxt94y{margin-right:1px}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
@@ -16,16 +21,19 @@
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._mrkbidpf{border-bottom-left-radius:0}
 ._mrkblb4i{border-bottom-left-radius:var(--ds-radius-xsmall,2px)}
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._y3gn18uv{text-align:initial}
+._4cvxq98m:hover{border-color:var(--ds-border-selected,#1868db)}
 ._irr31q28:hover{background-color:var(--ds-background-selected-bold-hovered,#1558bc)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._1di612kk:active{background-color:var(--ds-background-selected-bold-pressed,#123263)}

package/dist/es2019/view/InlineCard/common/action-button/index.js

@@ -10,7 +10,8 @@ const styles = {
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhkby5v",
-  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
+  unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk",
+  action: "_x3doia51 _1s7zia51 _n7zlia51 _syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13liidpf _mrkbidpf _2hwxv77o _k48pi7a9 _o5721q9c _4cvxq98m _irr31q28 _1di612kk"
 };
 /**
  * Action button has to be a span for the overflow to work correctly

package/dist/es2019/view/InlineCard/common/rovo-actions-button/index.compiled.css

@@ -0,0 +1,15 @@
+
+._v564hlhx{transition:max-width .3s ease-in-out,padding-right .3s ease-in-out}._154iidpf{top:0}
+._18m915vq{overflow-y:hidden}
+._1e0c1nu9{display:inline}
+._1e0c1o8l{display:inline-block}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1xi2idpf{right:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._o5721q9c{white-space:nowrap}
+._p12fidpf{max-width:0}
+._p12fuuw1{max-width:200px}
+._s7n4jp4b{vertical-align:top}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/view/InlineCard/common/rovo-actions-button/index.js

@@ -0,0 +1,78 @@
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { cx } from '@atlaskit/css';
+import RovoChatIcon from '@atlaskit/icon/core/rovo-chat';
+import Popup from '@atlaskit/popup';
+import { Box } from '@atlaskit/primitives/compiled';
+import { messages } from '../../../../messages';
+import AIPrism from '../../../common/ai-prism';
+import { ActionButton } from '../action-button';
+import { RovoPostAuthActionsModal } from '../rovo-post-auth-actions-modal';
+const styles = {
+  wrapper: "_kqswh2mm _1e0c1o8l",
+  expanded: "_kqswstnw _154iidpf _1xi2idpf _1e0c1nu9 _o5721q9c _1pbykb7n",
+  expandedText: "_1reo15vq _18m915vq _v564hlhx _1e0c1o8l _p12fidpf _s7n4jp4b _o5721q9c",
+  expandedTextVisible: "_p12fuuw1 _u5f31b66"
+};
+export const RovoActionsButton = ({
+  onClick,
+  testId,
+  title = '',
+  url = ''
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
+  const handleClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsPopupOpen(prev => !prev);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isPopupOpen,
+    onClose: () => setIsPopupOpen(false),
+    placement: "right-start",
+    content: () => /*#__PURE__*/React.createElement(AIPrism, {
+      isVisible: true,
+      isMoving: true,
+      isGlowing: true
+    }, /*#__PURE__*/React.createElement(RovoPostAuthActionsModal, {
+      title: title,
+      url: url,
+      testId: testId && `${testId}-popup`
+    })),
+    trigger: triggerProps => /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.wrapper,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onFocus: () => setIsHovered(true),
+      onBlur: () => setIsHovered(false)
+    }, /*#__PURE__*/React.createElement(ActionButton, _extends({
+      onClick: handleClick,
+      viewType: "action",
+      testId: testId
+    }, triggerProps), /*#__PURE__*/React.createElement(RovoChatIcon, {
+      label: "Rovo",
+      color: "var(--ds-icon-inverse, #FFFFFF)",
+      size: "small"
+    })), /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.expanded
+    }, /*#__PURE__*/React.createElement(ActionButton, _extends({
+      onClick: handleClick,
+      viewType: "action"
+    }, triggerProps), /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.expandedText, isHovered && styles.expandedTextVisible)
+    }, formatMessage(messages.rovo_actions_explore)), /*#__PURE__*/React.createElement(RovoChatIcon, {
+      label: "Rovo",
+      color: "var(--ds-icon-inverse, #FFFFFF)",
+      size: "small"
+    }))))
+  });
+};

package/dist/es2019/view/InlineCard/common/rovo-post-auth-actions-modal/index.compiled.css

@@ -0,0 +1,41 @@
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19it1cdj{border:var(--ds-border-width,1px) solid var(--ds-border-accent-lime,#6a9a23)}
+._19it1kc4{border:var(--ds-border-width,1px) solid var(--ds-border-accent-orange,#e06c00)}
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._19itnf5y{border:var(--ds-border-width,1px) solid var(--ds-border-accent-purple,#af59e1)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1kdj{width:25pc}
+._1bsb1ns9{width:-moz-fit-content;width:fit-content}
+._1e0c1bgi{display:contents}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3it94y{height:1px}
+._80omtlke{cursor:pointer}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhkf5uh{background-color:var(--ds-background-accent-orange-subtlest,#fff5db)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._bfhkm890{background-color:var(--ds-background-accent-lime-subtlest,#efffd6)}
+._bfhkp2ly{background-color:var(--ds-background-accent-purple-subtlest,#f8eefe)}
+._bfhkplhp{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._irr319yr:hover{background-color:var(--ds-background-accent-orange-subtlest-hovered,#fce4a6)}
+._irr3d4y8:hover{background-color:var(--ds-background-accent-lime-subtlest-hovered,#d3f1a7)}
+._irr3kca2:hover{background-color:var(--ds-background-accent-purple-subtlest-hovered,#eed7fc)}
+._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}