@atlaskit/smart-card 43.31.6 → 43.31.8

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/index.js

@@ -11,10 +11,11 @@ import AISummaryBlockResolvedView, { RovoSummaryBlockResolvedView } from './reso
  * @see Block
  */
 const AISummaryBlock = ({
+  is3PAuthRovoActionsExperimentOn,
   testId = 'smart-ai-summary-block',
   ...props
 }) => {
-  var _context$actions, _props$size, _cardContext$ui;
+  var _context$actions, _props$size2, _cardContext$ui2;
   const cardContext = useFlexibleCardContext();
   const context = useFlexibleUiContext();
   const actionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[InternalActionName.AISummaryAction];
@@ -24,37 +25,18 @@ const AISummaryBlock = ({
   if (!(actionData !== null && actionData !== void 0 && actionData.url)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
-    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size,
-    testId: testId,
-    url: actionData.url
-  }));
-};
-
-/**
- * Represents an AISummaryBlock, designed to summarising link resource
- * content using AI.
- * @public
- * @param {RovoSummaryBlockProps} RovoSummaryBlock
- * @see Block
- */
-export const RovoSummaryBlock = ({
-  testId = 'smart-ai-summary-block',
-  url,
-  ...props
-}) => {
-  var _props$size2, _cardContext$ui2;
-  const cardContext = useFlexibleCardContext();
-  if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved) {
-    return null;
-  }
-  if (!url) {
-    return null;
+  if (is3PAuthRovoActionsExperimentOn) {
+    var _props$size, _cardContext$ui;
+    return /*#__PURE__*/React.createElement(RovoSummaryBlockResolvedView, _extends({}, props, {
+      size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size,
+      testId: testId,
+      url: actionData.url
+    }));
   }
-  return /*#__PURE__*/React.createElement(RovoSummaryBlockResolvedView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
     size: (_props$size2 = props.size) !== null && _props$size2 !== void 0 ? _props$size2 : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui2 = cardContext.ui) === null || _cardContext$ui2 === void 0 ? void 0 : _cardContext$ui2.size,
     testId: testId,
-    url: url
+    url: actionData.url
   }));
 };
 export default AISummaryBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useEffect, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
 import { RovoIcon } from '@atlaskit/logo';
@@ -65,32 +65,54 @@ export const RovoSummaryBlockResolvedView = props => {
   const {
     testId,
     aiSummaryMinHeight = 0,
+    placeholder,
     url
   } = props;
   const {
     state: {
       content,
       status
-    },
-    summariseUrl
+    }
   } = useAISummaryAction(url);
-  const showAISummary = status === 'done' ||
-  // We want to display the AI Summary component only when there is content available during the loading process.
-  status === 'loading' && !!content;
   const isSummarisedOnMountRef = useRef(status === 'done');
-  useEffect(() => {
-    if (status !== 'ready' || isSummarisedOnMountRef.current) {
-      return;
-    }
-    isSummarisedOnMountRef.current = true;
-    summariseUrl();
-  }, [status, summariseUrl]);
   const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
   if (status === 'error') {
     return null;
   }
-  if (!showAISummary) {
-    return /*#__PURE__*/React.createElement(Inline, {
+
+  // Show summary when there is content to display
+  if (content && content !== '') {
+    return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+      direction: SmartLinkDirection.Vertical,
+      testId: `${testId}-resolved-view`,
+      className: ax(["_1reoewfl _18m9ewfl"])
+    }), /*#__PURE__*/React.createElement(Inline, {
+      xcss: newStyles.summaryWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([newStyles.iconWrapper])
+    }, /*#__PURE__*/React.createElement(RovoIcon, {
+      shouldUseHexLogo: true,
+      size: "xxsmall"
+    })), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
+      fromCache: isSummarisedOnMountRef.current
+    }), /*#__PURE__*/React.createElement(MotionWrapper, {
+      minHeight: minHeight,
+      show: true,
+      showTransition: !isSummarisedOnMountRef.current
+    }, /*#__PURE__*/React.createElement(AISummary, {
+      testId: `${testId}-ai-summary`,
+      minHeight: minHeight,
+      content: content
+    }), status === 'done' && /*#__PURE__*/React.createElement(AIFooter, null))));
+  }
+
+  // Show loading state on initial request where content hasn't returned yet.
+  if (status === 'loading') {
+    return /*#__PURE__*/React.createElement(MotionWrapper, {
+      minHeight: minHeight,
+      show: true,
+      showTransition: true
+    }, /*#__PURE__*/React.createElement(Inline, {
       testId: `${testId}-placeholder`,
       xcss: newStyles.placeholderWrapper
     }, /*#__PURE__*/React.createElement("div", {
@@ -105,29 +127,13 @@ export const RovoSummaryBlockResolvedView = props => {
       xcss: newStyles.ellipsesContainer
     }, /*#__PURE__*/React.createElement(EllipsesAnimation, {
       isAnimated: true
-    })));
+    }))));
   }
-  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
-    direction: SmartLinkDirection.Vertical,
-    testId: `${testId}-resolved-view`,
-    className: ax(["_1reoewfl _18m9ewfl"])
-  }), /*#__PURE__*/React.createElement(Inline, {
-    xcss: newStyles.summaryWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax([newStyles.iconWrapper])
-  }, /*#__PURE__*/React.createElement(RovoIcon, {
-    shouldUseHexLogo: true,
-    size: 'xxsmall'
-  })), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
-    fromCache: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/React.createElement(MotionWrapper, {
-    minHeight: minHeight,
-    show: showAISummary,
-    showTransition: !isSummarisedOnMountRef.current
-  }, /*#__PURE__*/React.createElement(AISummary, {
-    testId: `${testId}-ai-summary`,
-    minHeight: minHeight,
-    content: content
-  }), status === 'done' && /*#__PURE__*/React.createElement(AIFooter, null))));
+
+  // Otherwise, show placeholder if provided
+  if (placeholder) {
+    return /*#__PURE__*/React.createElement(Fragment, null, placeholder);
+  }
+  return null;
 };
 export default AISummaryBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/hover-card-footer-block/index.js

@@ -14,7 +14,7 @@ import Block from '../block';
  * Allowed footer actions for HoverCard, in display order. Fetched from context.
  * @featureGate platform_sl_3p_auth_rovo_action_kill_switch
  */
-const HIDDEN_HOVER_CARD_FOOTER_ACTIONS = [InternalActionName.AISummaryAction, InternalActionName.RovoChatAction];
+const HIDDEN_HOVER_CARD_FOOTER_ACTIONS = [InternalActionName.RovoChatAction];
 const ignoreContainerMarginStyles = null;
 const elevatedFooterStyles = null;
 const providerStyles = null;

package/dist/es2019/view/FlexibleCard/components/elements/common/base-icon-element/index.js

@@ -52,6 +52,20 @@ const renderDefaultIcon = (label, testId) => /*#__PURE__*/React.createElement(Li
   testId: `${testId}-default`,
   color: "currentColor"
 });
+const widthFromSize = (size, isTiledIcon) => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return "var(--ds-space-300, 24px)";
+    case SmartLinkSize.Large:
+      return "var(--ds-space-300, 24px)";
+    case SmartLinkSize.Medium:
+      return isTiledIcon ? "var(--ds-space-250, 20px)" : "var(--ds-space-200, 16px)";
+    case SmartLinkSize.Small:
+      return "var(--ds-space-200, 16px)";
+    default:
+      return "var(--ds-space-200, 16px)";
+  }
+};
 const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium, appearance, hideLoadingSkeleton, label) => {
   const width = size === SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
@@ -68,7 +82,22 @@ const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium,
     }));
   }
 };
-
+const renderImageIconNew = (defaultIcon, url, testId, size = SmartLinkSize.Medium, appearance, hideLoadingSkeleton, label, isTiledIcon = false) => {
+  const width = widthFromSize(size, isTiledIcon);
+  if (url) {
+    return /*#__PURE__*/React.createElement(ImageIcon, _extends({}, fg('platform_navx_smart_link_icon_label_a11y') ? {
+      label
+    } : {}, {
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url,
+      width: width,
+      height: width,
+      appearance: appearance,
+      hideLoadingSkeleton: hideLoadingSkeleton
+    }));
+  }
+};
 /**
  * A base element that displays an Icon or favicon.
  * @internal
@@ -93,8 +122,8 @@ const IconElement = ({
   const label = fg('platform_navx_smart_link_icon_label_a11y') ? labelProp !== null && labelProp !== void 0 ? labelProp : '' : labelProp !== null && labelProp !== void 0 ? labelProp : 'Link';
   const element = useMemo(() => {
     const defaultIcon = renderDefaultIcon(label, testId);
-    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, size, appearance, hideLoadingSkeleton, fg('platform_navx_smart_link_icon_label_a11y') ? label : undefined) || renderAtlaskitIcon(icon, testId, size, fg('platform_navx_smart_link_icon_label_a11y') ? label : undefined) || defaultIcon;
-  }, [label, testId, overrideIcon, render, url, size, appearance, hideLoadingSkeleton, icon]);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || (fg('platform_sl_3p_preauth_better_hovercard_killswitch') ? renderImageIconNew(defaultIcon, url, testId, size, appearance, hideLoadingSkeleton, fg('platform_navx_smart_link_icon_label_a11y') ? label : undefined, isTiledIcon) : renderImageIcon(defaultIcon, url, testId, size, appearance, hideLoadingSkeleton, fg('platform_navx_smart_link_icon_label_a11y') ? label : undefined)) || renderAtlaskitIcon(icon, testId, size, fg('platform_navx_smart_link_icon_label_a11y') ? label : undefined) || defaultIcon;
+  }, [label, testId, overrideIcon, render, url, size, appearance, hideLoadingSkeleton, icon, isTiledIcon]);
   const width = getIconWidth(size);
   return /*#__PURE__*/React.createElement("div", {
     "data-smart-element": name,
@@ -103,11 +132,15 @@ const IconElement = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: ax([styles.container, positionStyleMap[position], render && customRenderStyleMap[size], className])
-  }, isTiledIcon && isNewBlockcardUnauthorizedRefreshExperimentEnabled() ? /*#__PURE__*/React.createElement(Tile, {
+  }, isTiledIcon && (fg('platform_sl_3p_preauth_better_hovercard_killswitch') || isNewBlockcardUnauthorizedRefreshExperimentEnabled()) ? /*#__PURE__*/React.createElement(Tile, {
     size: size,
-    label: label
+    hasBorder: true,
+    backgroundColor: "white",
+    label: label,
+    testId: `${testId}-tile`
   }, element) : /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconWrapperStyle,
+    testId: `${testId}-box`,
     style: {
       width,
       height: width

package/dist/es2019/view/HoverCard/components/ContentContainer.compiled.css

@@ -3,7 +3,7 @@
 ._189eidpf{border-width:0}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bsb1f23{width:25rem}
-._1bsbiolt{width:22rem}
+._1bsbtye8{width:20rem}
 ._9spsglyw .smart-link-loading-placeholder{display:none}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -33,7 +33,7 @@ const ConnectedAIPrismContainer = ({
   const resolvedWidthAppearance = widthAppearance !== null && widthAppearance !== void 0 ? widthAppearance : 'default';
   const container = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_11q7glyw _189eidpf _vchhusvi", resolvedWidthAppearance === 'slim' ? "_1bsbiolt" : "_1bsb1f23", "_9spsglyw", !isAIEnabled && "_2rko1mok _bfhk1bhr _16qs130s", hoverCardClassName]),
+    className: ax(["_11q7glyw _189eidpf _vchhusvi", resolvedWidthAppearance === 'slim' ? "_1bsbtye8" : "_1bsb1f23", "_9spsglyw", !isAIEnabled && "_2rko1mok _bfhk1bhr _16qs130s", hoverCardClassName]),
     "data-testid": testId
   }, props), children);
   return isAIEnabled ? /*#__PURE__*/React.createElement(AIPrism, {

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

@@ -231,8 +231,7 @@ const HoverCardContent = ({
           flexibleCardProps: flexibleCardProps,
           isAISummaryEnabled: isAISummaryEnabled,
           onActionClick: onActionClick,
-          titleBlockProps: titleBlockProps,
-          url: url
+          titleBlockProps: titleBlockProps
         }));
       }
       return null;
@@ -284,8 +283,7 @@ const HoverCardContent = ({
           flexibleCardProps: flexibleCardProps,
           isAISummaryEnabled: isAISummaryEnabled,
           onActionClick: onActionClick,
-          titleBlockProps: titleBlockProps,
-          url: url
+          titleBlockProps: titleBlockProps
         }));
       }
       return null;

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -11,7 +11,6 @@ import { succeedUfoExperience } from '../../../../../state/analytics';
 import useAISummaryAction from '../../../../../state/hooks/use-ai-summary-action';
 import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, ResolvedHoverCardFooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
-import { RovoSummaryBlock } from '../../../../FlexibleCard/components/blocks/ai-summary-block';
 import { getMetadata } from '../../../utils';
 import ImagePreview from '../../ImagePreview';
 const hiddenSnippetStyles = null;
@@ -26,8 +25,7 @@ const HoverCardResolvedView = ({
   onActionClick,
   showRovoResolvedView,
   titleBlockProps,
-  id,
-  url
+  id
 }) => {
   var _cardState$details;
   const {
@@ -82,12 +80,10 @@ const HoverCardResolvedView = ({
     secondary: secondary,
     maxLines: 1,
     size: SmartLinkSize.Medium
-  }), is3PAuthRovoActionsExperimentOn ? /*#__PURE__*/React.createElement(RovoSummaryBlock, {
+  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
-    url: url
-  }) : isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
-    aiSummaryMinHeight: aiSummaryMinHeight,
-    placeholder: snippet
+    placeholder: snippet,
+    is3PAuthRovoActionsExperimentOn: is3PAuthRovoActionsExperimentOn
   }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: "hidden-snippet",
     onRender: onSnippetRender,

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

@@ -1,16 +1,39 @@
 
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}
+._154i1crf{top:9pt}
+._154i1ul9{top:30px}
+._154i1ylp{top:40px}
 ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
 ._1bahesu3{justify-content:flex-end}
+._1bsb7vkz{width:1pc}
+._1bsbqslr{width:22px}
+._1bsbzwfg{width:2pc}
 ._1e0c1txw{display:flex}
+._1ltv1v6z{left:7px}
 ._1n261g80{flex-wrap:wrap}
+._1o9zidpf{flex-shrink:0}
+._1xi21v6z{right:7px}
+._1xi2qslr{right:22px}
 ._4cvr1h6o{align-items:center}
-._bfhkomb0{background-color:var(--ds-background-brand-bold,#0052cc)}
+._4t3izwfg{height:2pc}
+._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
+._bfhk16e3{background-color:var(--ds-background-accent-blue-bolder,#1868db)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
 ._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
-._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._otyrutpp{margin-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)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1yjp{color:var(--ds-icon-success,#22a06b)}
+._syazuq3u{color:var(--ds-icon-accent-purple,#af59e1)}
+._syazwejn{color:var(--ds-background-accent-gray-subtlest-hovered,#dddee1)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._y3gn1h6o{text-align:center}

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

@@ -6,47 +6,45 @@ 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 AiGenerativeTextSummaryIcon from '@atlaskit/icon/core/ai-generative-text-summary';
+import CoreLinkIcon from '@atlaskit/icon/core/link';
+import RovoChatIcon from '@atlaskit/icon/core/rovo-chat';
 import { extractSmartLinkProvider } from '@atlaskit/link-extractors';
+import { AtlassianIcon } from '@atlaskit/logo';
 import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
-import { CardDisplay } from '../../../../../constants';
+import { CardDisplay, SmartLinkSize } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useSmartCardActions } from '../../../../../state/actions';
+import FlexibleCard from '../../../../FlexibleCard';
+import { LinkIcon } from '../../../../FlexibleCard/components/elements';
+import { DenseSparkle, SparseSparkle, SquiglyArrow } from './graphics';
 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: CoreLinkIcon,
+  message: messages.rovo_unauthorised_feature_clear_link_names,
+  testIdSuffix: 'clear-link-names'
 }, {
-  icon: SearchIcon,
-  appearance: 'purple',
-  titleMessage: messages.rovo_unauthorised_feature_related_content_title,
-  descMessage: messages.rovo_unauthorised_feature_related_content_desc,
-  testIdSuffix: 'related-content'
+  icon: AiGenerativeTextSummaryIcon,
+  message: messages.rovo_unauthorised_feature_understand_linked_docs,
+  testIdSuffix: 'understand-linked-docs'
 }, {
-  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'
+  icon: RovoChatIcon,
+  message: messages.rovo_unauthorised_feature_go_deeper_smart_suggestions,
+  testIdSuffix: 'go-deeper-smart-suggestions'
 }];
+const sparkleWrapBase = null;
+const sparkleLeftWrap = null;
+const sparkleGreyRightWrap = null;
+const sparkleVioletRightWrap = null;
 const layoutStyles = {
-  header: "_bfhkomb0 _syaz15cr _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _13li1mok _qrwq1mok",
+  connectorStroke: "_syaz1fxt _1e0c1txw _1o9zidpf",
+  atlassianIconTile: "_2rko1mok _1e0c1txw _4cvr1h6o _1bah1h6o _1bsbzwfg _4t3izwfg _bfhk16e3",
+  header: "_bfhk11bn _ca0q1ejb _u5f3pxbi _n3tdutpp _19bvpxbi _13li1mok _qrwq1mok _kqswh2mm",
+  headerGraphicRow: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1h6o _otyrutpp",
+  headerTitle: "_y3gn1h6o",
   body: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
-  footer: "_19pkpxbi _ca0qutpp",
-  footerActions: "_zulputpp _1e0c1txw _4cvr1h6o _1bahesu3 _1n261g80"
+  featureIconCell: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf _1bsb7vkz",
+  footer: "_zulputpp _19pkutpp _ca0q1b66 _1e0c1txw _4cvr1h6o _1bahesu3 _1n261g80"
 };
 const RovoUnauthorisedView = ({
   id = '',
@@ -71,50 +69,76 @@ const RovoUnauthorisedView = ({
       authorize(CardDisplay.HoverCardPreview);
     }
   }, [authorize, fireEvent]);
-  return /*#__PURE__*/React.createElement(Box, {
-    testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
+  const handleDismiss = useCallback(() => {
+    if (onDismiss) {
+      fireEvent('ui.button.clicked.dismiss', {});
+      onDismiss();
+    }
+  }, [fireEvent, onDismiss]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId,
+    ui: {
+      hideElevation: true,
+      hideBackground: true,
+      removeBlockRestriction: true,
+      hidePadding: true
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
     xcss: layoutStyles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1o9zidpf _1e0c1txw _kqswstnw", "_syaz1yjp _154i1ul9 _1ltv1v6z"])
+  }, /*#__PURE__*/React.createElement(DenseSparkle, null)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1o9zidpf _1e0c1txw _kqswstnw", "_syazwejn _154i1crf _1xi2qslr"])
+  }, /*#__PURE__*/React.createElement(SparseSparkle, null)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1o9zidpf _1e0c1txw _kqswstnw", "_syazuq3u _1bsbqslr _154i1ylp _1xi21v6z"])
+  }, /*#__PURE__*/React.createElement(DenseSparkle, null)), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.headerGraphicRow
+  }, /*#__PURE__*/React.createElement(LinkIcon, {
+    size: SmartLinkSize.Medium,
+    isTiledIcon: true
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.connectorStroke
+  }, /*#__PURE__*/React.createElement(SquiglyArrow, null)), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.atlassianIconTile
+  }, /*#__PURE__*/React.createElement(AtlassianIcon, {
+    appearance: "inverse",
+    size: "small"
+  }))), /*#__PURE__*/React.createElement(Box, {
+    xcss: layoutStyles.headerTitle
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     size: "medium",
-    color: "color.text.inverse"
+    color: "color.text"
   }, 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, {
+  })) : /*#__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, {
+  }, ROVO_FEATURES.map(feature => {
+    const FeatureIcon = feature.icon;
+    return /*#__PURE__*/React.createElement(Inline, {
+      key: feature.testIdSuffix,
+      space: "space.150",
+      alignBlock: "center",
+      testId: `${testId}-feature-${feature.testIdSuffix}`
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: layoutStyles.featureIconCell
+    }, /*#__PURE__*/React.createElement(FeatureIcon, {
+      label: ""
+    })), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, feature.message)));
+  })), /*#__PURE__*/React.createElement(Box, {
     xcss: layoutStyles.footer
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: layoutStyles.footerActions
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050"
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
-    onClick: onDismiss,
+    spacing: "compact",
+    onClick: handleDismiss,
     testId: `${testId}-not-now`
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_unauthorised_not_now)), /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",

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

@@ -0,0 +1,39 @@
+/* graphics.tsx generated by @compiled/babel-plugin v0.39.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+export const DenseSparkle = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "33",
+    height: "33",
+    viewBox: "0 0 33 33",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M 18.1377,8.5584 C 19.820521,9.7606431 19.569624,7.0234324 19.891314,6.0724492 20.627318,4.4834923 20.654624,2.6485663 20.986387,0.9358225 20.985763,-0.63106096 19.153938,0.29529924 19.30907,1.4628594 18.581402,3.0380165 18.941526,4.9281736 18.3064,6.59809 18.189624,7.241971 17.98497,7.9130416 18.1377,8.5584 Z M 14.048,8.62872 C 16.108587,8.8291383 14.519035,6.5848441 14.323941,5.6001158 14.16595,3.856369 13.270155,2.254813 12.701225,0.60606587 11.918719,-0.74933808 10.791962,0.96396467 11.513059,1.8973545 11.672048,3.6244988 12.925689,5.0825474 13.2127,6.8456 13.436435,7.4621245 13.581302,8.1376081 14.048,8.62872 Z M 10.5438,10.7324 C 12.427639,9.875884 9.9317744,8.7259408 9.2689606,7.9718267 8.2625,6.5396335 6.6886891,5.5966404 5.36875,4.4566662 4.0131223,3.6745583 3.8966957,5.7235932 4.9866023,6.1718516 5.9867147,7.5895644 7.8032328,8.2251817 8.93219,9.61022 9.4294433,10.031063 9.9148481,10.555839 10.5438,10.7324 Z M 8.55828,14.3099 C 9.7604964,12.627122 7.023384,12.877794 6.0723265,12.556262 4.4833477,11.820331 2.6484558,11.792914 0.93570025,11.461212 c -1.5668845,6.26e-4 -0.64052126,1.832452 0.52703915,1.677318 1.5751539,0.727694 3.4653396,0.36738 5.1352306,1.00267 0.6438861,0.116827 1.314933,0.321333 1.96031,0.1687 z m 0.07008,4.0894 C 8.828733,16.338698 6.5844599,17.928323 5.5997508,18.123433 3.8560002,18.281408 2.2543901,19.1771 0.60569938,19.746162 -0.74955704,20.529217 0.96332374,21.653982 1.8969889,20.93548 3.6240071,20.774217 5.0821994,19.522267 6.84523,19.2346 7.4618123,19.010984 8.1372369,18.866007 8.62836,18.3993 Z m 2.10414,3.5072 C 9.8760472,20.022637 8.7260556,22.518484 7.9719398,23.181273 6.5393153,24.18655 5.6000777,25.76278 4.4595963,27.081513 3.6775168,28.437135 5.7265095,28.553572 6.1747816,27.463666 7.5925047,26.463552 8.2280912,24.647029 9.61315,23.5181 c 0.418283,-0.497326 0.951352,-0.985318 1.11935,-1.6116 z m 3.5775,1.9828 c -1.682815,-1.202255 -1.431924,1.534991 -1.753614,2.485976 -0.736023,1.588942 -0.763314,3.423872 -1.095073,5.136612 6.39e-4,1.566887 1.832425,0.640518 1.677317,-0.527032 0.727655,-1.57517 0.367555,-3.465328 1.00267,-5.135256 0.116772,-0.64388 0.321426,-1.314917 0.1687,-1.9603 z m 4.0891,-0.0702 c -2.060649,-0.200406 -0.470945,2.043891 -0.275873,3.028605 0.157937,1.743716 1.053669,3.345319 1.622686,4.994007 0.782496,1.355437 1.909207,-0.357878 1.188142,-1.291274 C 20.77504,28.823312 19.521385,27.365256 19.2344,25.6022 19.010647,24.985692 18.865809,24.310193 18.3991,23.8191 Z m 3.5074,-2.1038 c -1.88386,0.856461 0.611976,2.006423 1.274773,2.760542 1.006466,1.432207 2.580314,2.375182 3.90024,3.515183 1.355682,0.782012 1.472001,-1.26689 0.382153,-1.715209 C 26.463526,24.858147 24.647022,24.222555 23.5181,22.8375 23.02082,22.416678 22.53553,21.891757 21.9065,21.7153 Z m 1.9826,-3.5775 c -1.202233,1.682763 1.53485,1.432123 2.485905,1.753638 1.588978,0.735928 3.423859,0.763338 5.136608,1.095049 1.566893,-5.94e-4 0.640594,-1.832443 -0.527,-1.677317 C 29.409454,18.581486 27.519286,18.941792 25.8494,18.3065 25.205557,18.189667 24.534178,17.985164 23.8891,18.1378 Z m -0.0704,-4.0894 c -0.200405,2.06064 2.043899,0.470968 3.028605,0.275867 1.743759,-0.15797 3.345359,-1.053678 4.994083,-1.622679 1.355308,-0.782551 -0.357965,-1.909199 -1.29135,-1.188185 -1.727151,0.159054 -3.185218,1.412574 -4.948238,1.699697 -0.616574,0.223619 -1.291971,0.368616 -1.7831,0.8353 z M 21.7152,10.544 c 0.85645,1.88385 2.006449,-0.6119565 2.760542,-1.2747918 1.432624,-1.0052563 2.371905,-2.581444 3.512333,-3.9002107 C 28.770204,4.0133778 26.721159,3.8969258 26.272916,4.986848 24.855171,5.9869493 24.21954,7.8034667 22.8345,8.93243 22.416234,9.4297408 21.883198,9.917751 21.7152,10.544 Z"
+  }));
+};
+export const SparseSparkle = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "35",
+    height: "34",
+    viewBox: "0 0 35 34",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m 21.4614,9.02651 c 1.774882,1.267966 1.510442,-1.6188099 1.849578,-2.6219063 0.776223,-1.6758612 0.805105,-3.61111 1.154947,-5.41753458 C 24.447185,-0.68027653 22.513317,0.28790594 22.69688,1.5429258 21.929419,3.2042498 22.309243,5.1977402 21.6394,6.95899 21.51609,7.6380728 21.300546,8.3458903 21.4614,9.02651 Z m -9.1629,0.611 C 14.479174,9.6115402 12.55696,7.4386694 12.239238,6.4296801 11.873994,4.6211661 10.751762,3.0453042 9.9684287,1.3818975 9.0519692,0.02745097 7.9717763,1.9817201 8.8672911,2.872095 9.2298246,4.664959 10.714117,6.0484595 11.2158,7.86365 c 0.30309,0.6222222 0.536236,1.3131609 1.0827,1.77386 z M 9.02651,14.4282 c 1.267976,-1.774848 -1.6188386,-1.510386 -2.6219063,-1.849578 -1.6758612,-0.776223 -3.61111,-0.805105 -5.41753458,-1.154947 -1.66734565,0.01874 -0.69916318,1.952608 0.55585668,1.769045 1.661324,0.767461 3.6548144,0.387637 5.4160642,1.05748 0.6790828,0.12331 1.3869003,0.338854 2.06752,0.178 z m 0.79812,7.0123 C 9.6506342,19.264889 7.6156756,21.33182 6.6290172,21.715218 4.8462675,22.200193 3.3480398,23.427583 1.7425513,24.327425 0.48184315,25.389439 2.4687817,26.243895 3.3047292,25.323131 5.0679233,24.838194 6.3485808,23.265036 8.1279,22.6448 8.727623,22.296964 9.4030508,22.019757 9.82463,21.4405 Z m 4.60367,2.4235 c -1.774857,-1.267999 -1.510322,1.618845 -1.849554,2.621865 -0.776222,1.675869 -0.805026,3.611122 -1.154946,5.417535 0.01882,1.667361 1.952587,0.699167 1.769034,-0.555848 0.767463,-1.661311 0.387597,-3.654815 1.057466,-5.416052 0.123252,-0.679055 0.338956,-1.387036 0.178,-2.0675 z m 5.9772,0.261 c -2.173333,-0.211383 -0.496768,2.155705 -0.291021,3.19429 0.166568,1.839106 1.111399,3.528228 1.711458,5.267122 0.84816,1.433261 2.042749,-0.366933 1.253122,-1.36187 C 22.911487,29.402909 21.589251,27.865123 21.2864,26.0057 21.05053,25.355401 20.897759,24.642984 20.4055,24.125 Z m 4.3514,-4.2566 c -1.918413,1.03763 0.793683,2.065164 1.542216,2.81224 1.163691,1.434148 2.891651,2.307238 4.359284,3.41661 1.503797,0.716781 1.491809,-1.445265 0.281572,-1.83218 C 29.783911,22.847779 27.827538,22.311391 26.5397,20.9362 25.981077,20.526301 25.453402,20.026312 24.7569,19.8684 Z m 0.2667,-6.5645 c -0.61356,2.094147 2.024993,0.892339 3.082584,0.881972 1.837741,0.184903 3.674321,-0.429733 5.494903,-0.694759 1.566146,-0.568664 0.02093,-2.078292 -1.105917,-1.48934 -1.8201,-0.172658 -3.577509,0.836398 -5.46037,0.783027 -0.682737,0.109486 -1.416687,0.125746 -2.0112,0.5191 z"
+  }));
+};
+export const SquiglyArrow = () => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "31",
+    height: "21",
+    viewBox: "0 0 31 21",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M 21.853446,0.12040609 C 20.167706,1.2017532 24.715673,2.4997309 25.755055,3.0673371 25.02723,3.2209011 21.984019,3.856737 20.991485,3.9633568 16.045179,5.5890307 11.446918,7.8287185 9.1072914,12.742806 7.8983204,12.284216 5.7117383,11.960731 4.1643839,12.645906 2.2323901,13.501397 0.58356937,15.13985 0.06015349,17.184987 0.06666279,19.997869 1.7741124,16.035826 2.7542112,15.14763 c 1.6305676,-1.477671 4.7339707,-2.002323 5.8717147,-1.083896 -0.6742412,2.17406 -0.7914961,6.013849 1.8803011,6.750565 2.072285,0.571408 3.768061,-1.977378 2.786707,-4.245231 C 12.524186,14.792533 11.187386,13.937797 10.469825,13.425746 12.484573,8.4842061 19.328854,5.5947574 24.21859,4.6647774 25.288915,4.5397793 29.069777,3.0700705 27.388804,4.826459 26.472831,6.3589647 23.793814,8.1658647 23.628028,9.0737265 23.1618,11.626835 26.092344,8.4605266 26.699318,7.7349157 27.826169,6.2825775 29.856947,4.4211835 30.479445,3.5562506 28.766042,2.8991905 26.575439,1.3555612 24.569756,0.89998649 23.662177,0.65006782 22.790889,0.24992986 21.853446,0.12040609 Z M 9.9983561,14.652336 C 11.498101,15.3957 13.411213,18.565161 11.127761,19.347839 9.1996093,18.911365 9.5916528,16.22149 9.9983561,14.652336 Z"
+  }));
+};