@atlaskit/smart-card 34.5.2 → 34.6.0

package/dist/esm/view/HoverCard/components/views/forbidden/index.compiled.css

@@ -0,0 +1,10 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._13lipd34{border-top-left-radius:var(--ds-border-radius-200,8px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1nu9{display:inline}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._otyrcxkx{margin-bottom:var(--ds-space-100,.5rem)}
+._qrwqpd34{border-top-right-radius:var(--ds-border-radius-200,8px)}
+._y3gn1h6o{text-align:center}

package/dist/esm/view/HoverCard/components/views/forbidden/index.js

@@ -1,17 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { SmartLinkStatus } from '../../../../../constants';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
 import extractHostname from '../../../../../extractors/common/hostname/extractHostname';
 import { messages } from '../../../../../messages';
 import FlexibleCard from '../../../../FlexibleCard';
 import { CustomBlock, PreviewBlock } from '../../../../FlexibleCard/components/blocks';
-import { getPreviewBlockStyles } from '../../../styled';
-import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
-var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
+import HoverCardForbiddenViewOld from './HoverCardForbiddenViewOld';
+var titleBlockStyles = null;
+var mainTextStyles = null;
+var connectButtonStyles = null;
+var basePreviewStyles = null;
+var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
     _ref$testId = _ref.testId,
@@ -41,25 +49,29 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
     testId: testId
   }), /*#__PURE__*/React.createElement(PreviewBlock, {
     ignoreContainerPadding: true,
-    overrideCss: getPreviewBlockStyles(),
-    testId: testId
+    testId: testId,
+    status: SmartLinkStatus.Forbidden,
+    className: ax(["_13lipd34 _qrwqpd34 _otyrcxkx"])
   }), /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: titleBlockStyles,
-    testId: "".concat(testId, "-title")
+    testId: "".concat(testId, "-title"),
+    status: SmartLinkStatus.Forbidden,
+    className: ax(["_1bah1h6o _k48p1pd9 _19pku2gc"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
     values: {
       product: product
     }
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: mainTextStyles,
-    testId: "".concat(testId, "-content")
+    testId: "".concat(testId, "-content"),
+    status: SmartLinkStatus.Forbidden,
+    className: ax(["_11c8qk37 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
     values: {
       product: product,
       hostname: hostname
     }
   }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: connectButtonStyles
+    status: SmartLinkStatus.Forbidden,
+    className: ax(["_1bah1h6o _19pku2gc"])
   }, /*#__PURE__*/React.createElement(Button, {
     testId: "".concat(testId, "-button"),
     onClick: action === null || action === void 0 ? void 0 : action.promise,
@@ -67,4 +79,11 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
     isDisabled: buttonDisabled
   }, action === null || action === void 0 ? void 0 : action.text)));
 };
+var HoverCardForbiddenView = function HoverCardForbiddenView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardForbiddenViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardForbiddenViewOld, props);
+  }
+};
 export default HoverCardForbiddenView;

package/dist/esm/view/HoverCard/components/views/forbidden/styled.js

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var titleBlockStyles = css({
   justifyContent: 'center',
@@ -7,6 +10,9 @@ export var titleBlockStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var mainTextStyles = css({
   display: 'inline',
@@ -16,6 +22,9 @@ export var mainTextStyles = css({
   textAlign: 'center'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var connectButtonStyles = css({
   justifyContent: 'center',

package/dist/esm/view/HoverCard/components/views/resolved/HoverCardResolvedViewOld.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
+import { succeedUfoExperience } from '../../../../../state/analytics';
+import FlexibleCard from '../../../../FlexibleCard';
+import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { getMetadata } from '../../../utils';
+import ImagePreview from '../../ImagePreview';
+import { hiddenSnippetStyles, metadataBlockCss } from './styled';
+var HoverCardResolvedViewOld = function HoverCardResolvedViewOld(_ref) {
+  var _cardState$details;
+  var cardState = _ref.cardState,
+    extensionKey = _ref.extensionKey,
+    flexibleCardProps = _ref.flexibleCardProps,
+    isAISummaryEnabled = _ref.isAISummaryEnabled,
+    onActionClick = _ref.onActionClick,
+    titleBlockProps = _ref.titleBlockProps,
+    id = _ref.id;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  useEffect(function () {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+      extensionKey: extensionKey,
+      display: CardDisplay.HoverCardPreview
+    });
+
+    // UFO will disregard this if authentication experience has not yet been started
+    succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+      display: CardDisplay.HoverCardPreview
+    });
+    fireEvent('ui.smartLink.renderSuccess', {
+      display: CardDisplay.HoverCardPreview
+    });
+  }, [extensionKey, fireEvent, id]);
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var _useMemo = useMemo(function () {
+      return getMetadata(extensionKey, data);
+    }, [data, extensionKey]),
+    primary = _useMemo.primary,
+    secondary = _useMemo.secondary;
+  var snippetHeight = React.useRef(0);
+  var snippetBlockRef = useRef(null);
+  var onSnippetRender = useCallback(function () {
+    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
+    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
+  }, []);
+  var imagePreview = ImagePreview({
+    data: data,
+    fallbackElementHeight: snippetHeight.current
+  });
+  var snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, {
+    status: SmartLinkStatus.Resolved
+  });
+  var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    overrideCss: metadataBlockCss,
+    maxLines: 1,
+    size: SmartLinkSize.Medium
+  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+    aiSummaryMinHeight: aiSummaryMinHeight,
+    placeholder: snippet,
+    status: SmartLinkStatus.Resolved
+  }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: "hidden-snippet",
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(ActionBlock, {
+    onClick: onActionClick,
+    spaceInline: "space.100"
+  }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
+};
+export default HoverCardResolvedViewOld;

package/dist/esm/view/HoverCard/components/views/resolved/index.compiled.css

@@ -0,0 +1,15 @@
+
+._2aco1vlj [data-smart-element-group]{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)}
+._quenui7n [data-smart-element-group]{gap:.06rem}
+._zulpidpf{gap:0}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._1ljqu2gc [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,8px)}
+._3tmpcxkx [data-smart-element-group]:nth-of-type(2)>span{margin-left:var(--ds-space-100,.5rem)}
+._3um015vq{visibility:hidden}
+._fmt31ohn [data-smart-element-group]:first-of-type{flex-grow:7}
+._ia0l11wp [data-smart-element-group]:nth-of-type(2){flex-grow:3}
+._kqswstnw{position:absolute}
+._oebj1txw [data-smart-element-group]{display:flex}
+._w3mucxkx [data-smart-element-group]:first-of-type>span{margin-right:var(--ds-space-100,.5rem)}
+._x7z0u2gc [data-smart-element-group]>[data-smart-element-group]>span{margin-right:var(--ds-space-100,8px)}
+._yklxcxkx [data-smart-element-group]:first-of-type [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,.5rem)}

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

@@ -1,5 +1,9 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
 import { succeedUfoExperience } from '../../../../../state/analytics';
@@ -7,8 +11,15 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { getMetadata } from '../../../utils';
 import ImagePreview from '../../ImagePreview';
-import { hiddenSnippetStyles, metadataBlockCss } from './styled';
-var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
+import HoverCardResolvedViewOld from './HoverCardResolvedViewOld';
+var hiddenSnippetStyles = null;
+var metadataBlockCss = null;
+
+/**
+ * Moved from HoverCardContent.tsx due to CompiledCSS migration.
+ */
+var titleBlockStyle = null;
+var HoverCardResolvedViewNew = function HoverCardResolvedViewNew(_ref) {
   var _cardState$details;
   var cardState = _ref.cardState,
     extensionKey = _ref.extensionKey,
@@ -56,13 +67,16 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   });
   var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
-    metadataPosition: SmartLinkPosition.Top
+    metadataPosition: SmartLinkPosition.Top,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: primary,
     secondary: secondary,
-    overrideCss: metadataBlockCss,
     maxLines: 1,
-    size: SmartLinkSize.Medium
+    size: SmartLinkSize.Medium,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulpidpf _2aco1vlj _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
   }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
     placeholder: snippet,
@@ -71,10 +85,18 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     testId: "hidden-snippet",
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
-    overrideCss: hiddenSnippetStyles
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_3um015vq _kqswstnw"])
   }), /*#__PURE__*/React.createElement(ActionBlock, {
     onClick: onActionClick,
     spaceInline: "space.100"
   }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
 };
+var HoverCardResolvedView = function HoverCardResolvedView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardResolvedViewOld, props);
+  }
+};
 export default HoverCardResolvedView;

package/dist/esm/view/HoverCard/components/views/resolved/styled.js

@@ -5,14 +5,23 @@ import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 var elementGap = '0.5rem';
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tgap: 0px;\n\t/* primary element group */\n\t[data-smart-element-group]:nth-of-type(1) {\n\t\tflex-grow: 7;\n\n\t\t// a separator between text-based element\n\t\t", "\n\n\t\t/* horizontal spacing between elements in group */\n    > span {\n\t\t\tmargin-right: ", ";\n\t\t}\n\t}\n\t/* secondary element group */\n\t[data-smart-element-group]:nth-of-type(2) {\n\t\tflex-grow: 3;\n\t\t/* horizontal spacing between elements in group */\n\t\t> span {\n\t\t\tmargin-left: ", ";\n\t\t}\n\t}\n\n\t[data-smart-element-group] {\n\t\tline-height: 1rem;\n\t}\n"])), separatorCss, elementGap, elementGap);
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var footerBlockCss = css({
   height: '1.5rem'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var hiddenSnippetStyles = css({
   visibility: 'hidden',

package/dist/esm/view/HoverCard/components/views/resolving/HoverCardLoadingViewOld.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
+import Icon from '../../../../FlexibleCard/components/elements/icon';
+import { CARD_WIDTH_REM } from '../../../styled';
+import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
+var HoverCardLoadingViewOld = function HoverCardLoadingViewOld(_ref) {
+  var titleBlockProps = _ref.titleBlockProps;
+  var testId = 'hover-card-loading-view';
+  var lineHeightRem = 1.25;
+  var skeletonWidth = CARD_WIDTH_REM - 2;
+  var size = titleBlockProps.size,
+    actions = titleBlockProps.actions;
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: 2
+  });
+  var LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : LoadingSkeletonOld;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: loadingViewContainer,
+      "data-testid": testId
+    }, jsx("div", {
+      css: skeletonContainer
+    }, jsx(CustomBlock, _extends({}, titleBlockProps, {
+      overrideCss: titleBlockStyles,
+      testId: "".concat(testId, "-title-block")
+    }), jsx(Icon, {
+      render: function render() {
+        return jsx(LoadingSkeleton, null);
+      },
+      size: size
+    }), jsx("span", {
+      css: getTitleStyles(lineHeightRem),
+      "data-testid": "".concat(testId, "-title")
+    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
+      height: "".concat(lineHeightRem, "rem")
+    }) : jsx(LoadingSkeletonOld, {
+      height: lineHeightRem
+    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem * 3, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }), jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem * 3
+    }), jsx(LoadingSkeletonOld, {
+      width: skeletonWidth,
+      height: lineHeightRem
+    }))))
+  );
+};
+export default HoverCardLoadingViewOld;

package/dist/esm/view/HoverCard/components/views/resolving/index.compiled.css

@@ -0,0 +1,12 @@
+
+._1yt41e9d{padding:var(--ds-space-200,1rem)}
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}
+._zulpud5o{gap:.625rem}._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1k92{height:1.25rem}
+._e2oo1osq span{width:100%}
+._i0dl1wug{flex-basis:auto}

package/dist/esm/view/HoverCard/components/views/resolving/index.js

@@ -1,72 +1,76 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
 import Icon from '../../../../FlexibleCard/components/elements/icon';
 import { CARD_WIDTH_REM } from '../../../styled';
-import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
-var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
+import HoverCardLoadingViewOld from './HoverCardLoadingViewOld';
+var loadingViewContainer = null;
+var skeletonContainer = null;
+var titleStyle = null;
+var titleBlockStyles = null;
+var HoverCardLoadingViewNew = function HoverCardLoadingViewNew(_ref) {
   var titleBlockProps = _ref.titleBlockProps;
   var testId = 'hover-card-loading-view';
   var lineHeightRem = 1.25;
   var skeletonWidth = CARD_WIDTH_REM - 2;
   var size = titleBlockProps.size,
     actions = titleBlockProps.actions;
-  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
     visibleButtonsNum: 2
   });
   var LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : LoadingSkeletonOld;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: loadingViewContainer,
-      "data-testid": testId
-    }, jsx("div", {
-      css: skeletonContainer
-    }, jsx(CustomBlock, _extends({}, titleBlockProps, {
-      overrideCss: titleBlockStyles,
-      testId: "".concat(testId, "-title-block")
-    }), jsx(Icon, {
-      render: function render() {
-        return jsx(LoadingSkeleton, null);
-      },
-      size: size
-    }), jsx("span", {
-      css: getTitleStyles(lineHeightRem),
-      "data-testid": "".concat(testId, "-title")
-    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
-      height: "".concat(lineHeightRem, "rem")
-    }) : jsx(LoadingSkeletonOld, {
-      height: lineHeightRem
-    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem, "rem")
-    }), jsx(LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem * 3, "rem")
-    }), jsx(LoadingSkeletonNew, {
-      width: "".concat(skeletonWidth, "rem"),
-      height: "".concat(lineHeightRem, "rem")
-    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }), jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem * 3
-    }), jsx(LoadingSkeletonOld, {
-      width: skeletonWidth,
-      height: lineHeightRem
-    }))))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_1yt41e9d _1e0c1txw _2lx21bp4"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpud5o _1e0c1txw _2lx21bp4 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
+    testId: "".concat(testId, "-title-block"),
+    className: ax(["_zulpcxkx _1bsb1osq"])
+  }), /*#__PURE__*/React.createElement(Icon, {
+    render: function render() {
+      return /*#__PURE__*/React.createElement(LoadingSkeleton, null);
+    },
+    size: size
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-title"),
+    className: ax(["_16jlkb7n _1o9zidpf _i0dl1wug _4t3i1k92 _e2oo1osq"])
+  }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    height: "".concat(lineHeightRem, "rem")
+  }) : /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    height: lineHeightRem
+  })), actionGroup), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem, "rem")
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem * 3, "rem")
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    width: "".concat(skeletonWidth, "rem"),
+    height: "".concat(lineHeightRem, "rem")
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem * 3
+  }), /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    width: skeletonWidth,
+    height: lineHeightRem
+  }))));
+};
+var HoverCardLoadingView = function HoverCardLoadingView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(HoverCardLoadingViewOld, props);
+  }
 };
 export default HoverCardLoadingView;

package/dist/esm/view/HoverCard/components/views/resolving/styled.js

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var loadingViewContainer = css({
   display: 'flex',
@@ -7,6 +10,9 @@ export var loadingViewContainer = css({
   padding: "var(--ds-space-200, 1rem)"
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var skeletonContainer = css({
   display: 'flex',
@@ -15,6 +21,10 @@ export var skeletonContainer = css({
   gap: '0.625rem',
   alignItems: 'center'
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 export var getTitleStyles = function getTitleStyles(height) {
   return css({
     flex: '1 0 auto',
@@ -27,6 +37,9 @@ export var getTitleStyles = function getTitleStyles(height) {
   });
 };
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var titleBlockStyles = css({
   width: '100%',

package/dist/esm/view/HoverCard/components/views/unauthorised/HoverCardUnauthorisedViewOld.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
+import { ActionName, CardDisplay } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useSmartCardActions } from '../../../../../state/actions';
+import { hasAuthScopeOverrides } from '../../../../../state/helpers';
+import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
+import FlexibleCard from '../../../../FlexibleCard';
+import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
+import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
+import { LinkIcon } from '../../../../FlexibleCard/components/elements';
+import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
+var HoverCardUnauthorisedViewOld = function HoverCardUnauthorisedViewOld(_ref) {
+  var _cardState$details, _extractProvider;
+  var _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
+    flexibleCardProps = _ref.flexibleCardProps,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
+    url = _ref.url;
+  var cardState = flexibleCardProps.cardState;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
+  var _useSmartCardActions = useSmartCardActions(id, url),
+    authorize = _useSmartCardActions.authorize;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var handleAuthorize = useCallback(function () {
+    if (authorize) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      authorize(CardDisplay.HoverCardPreview);
+    }
+  }, [authorize, fireEvent]);
+  var actions = useMemo(function () {
+    return [{
+      name: ActionName.CustomAction,
+      content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
+        values: {
+          context: providerName
+        }
+      })),
+      onClick: handleAuthorize
+    }];
+  }, [handleAuthorize, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
+    testId: testId
+  }), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: titleBlockStyles,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+    values: {
+      context: providerName
+    }
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: mainTextStyles,
+    testId: "".concat(testId, "-content")
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    providerName: providerName,
+    isProductIntegrationSupported: isProductIntegrationSupported
+  }))), /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: connectButtonStyles,
+    testId: "".concat(testId, "-button")
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    appearance: "primary"
+  })));
+};
+export default HoverCardUnauthorisedViewOld;

package/dist/esm/view/HoverCard/components/views/unauthorised/index.compiled.css

@@ -0,0 +1,5 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp5l1i{gap:.5rem .5rem}
+._19pkcxkx{margin-top:var(--ds-space-100,.5rem)}
+._1bahesu3{justify-content:flex-end}
+._bpsp1wq8 a{font-weight:var(--ds-font-weight-medium,500)}