@atlaskit/smart-card 34.7.0 → 34.9.0

package/dist/esm/view/LinkUrl/index.js

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.7.0",
+  packageVersion: "34.9.0",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/esm/view/RelatedLinksModal/components/EmptyState.compiled.css

@@ -0,0 +1,12 @@
+
+._zulpu2gc{gap:var(--ds-space-100,8px)}._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._y3gn1h6o{text-align:center}

package/dist/esm/view/RelatedLinksModal/components/EmptyState.js

@@ -1,34 +1,33 @@
-import React from 'react';
+/* EmptyState.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./EmptyState.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Heading from '@atlaskit/heading';
-import { Box, xcss } from '@atlaskit/primitives';
-var emptyStateStyles = xcss({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 'space.100',
-  height: '100%',
-  justifyContent: 'center',
-  marginLeft: 'space.300',
-  marginRight: 'space.300',
-  textAlign: 'center'
-});
-var descriptionStyles = xcss({
-  marginTop: 'space.0',
-  marginBottom: 'space.300',
-  color: 'color.text'
-});
-export var EmptyState = function EmptyState(_ref) {
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import { EmptyStateOld } from './EmptyStateOld';
+var styles = {
+  emptyState: "_zulpu2gc _4cvr1h6o _1e0c1txw _2lx21bp4 _4t3i1osq _1bah1h6o _18u01ejb _2hwx1ejb _y3gn1h6o",
+  description: "_19pkze3t _otyr1ejb _syaz1fxt"
+};
+export var EmptyStateNew = function EmptyStateNew(_ref) {
   var testId = _ref.testId,
     header = _ref.header,
     description = _ref.description,
     renderImage = _ref.renderImage;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: emptyStateStyles,
+    xcss: styles.emptyState,
     testId: testId
   }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
     size: "small"
   }, header), description && /*#__PURE__*/React.createElement(Box, {
     as: "p",
-    xcss: descriptionStyles
+    xcss: styles.description
   }, description));
+};
+export var EmptyState = function EmptyState(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmptyStateNew, props);
+  }
+  return /*#__PURE__*/React.createElement(EmptyStateOld, props);
 };

package/dist/esm/view/RelatedLinksModal/components/EmptyStateOld.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Box, xcss } from '@atlaskit/primitives';
+var emptyStateStyles = xcss({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'space.100',
+  height: '100%',
+  justifyContent: 'center',
+  marginLeft: 'space.300',
+  marginRight: 'space.300',
+  textAlign: 'center'
+});
+var descriptionStyles = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.300',
+  color: 'color.text'
+});
+export var EmptyStateOld = function EmptyStateOld(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: emptyStateStyles,
+    testId: testId
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+    size: "small"
+  }, header), description && /*#__PURE__*/React.createElement(Box, {
+    as: "p",
+    xcss: descriptionStyles
+  }, description));
+};

package/dist/esm/view/RelatedLinksModal/components/RelatedLinksBaseModal.compiled.css

@@ -0,0 +1 @@
+._4t3i1i94{height:396px}

package/dist/esm/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -1,17 +1,21 @@
-import React, { useCallback, useRef } from 'react';
+/* RelatedLinksBaseModal.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./RelatedLinksBaseModal.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
 import RelatedLinksBaseModalOld from './RelatedLinksBaseModalOld';
+var styles = {
+  box: "_4t3i1i94"
+};
 var fixedWidth = 'small'; // pre-defined 400px by Atlaskit
 
-var boxStyles = xcss({
-  height: '396px' // Specified by the designer as this will display 5 incoming links and 2 outgoing links
-});
 var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
   var onClose = _ref.onClose,
     showModal = _ref.showModal,
@@ -38,7 +42,7 @@ var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
     shouldReturnFocus: false,
     onOpenComplete: openCompleteHandler
   }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_title))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Box, {
-    xcss: boxStyles
+    xcss: styles.box
   }, children)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     onClick: closeHandler

package/dist/esm/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -1,4 +1,8 @@
+
 ._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._8vu4iti9:hover{border-radius:var(--ds-border-radius-100,4px)}._10swu2gc:hover{padding-inline:var(--ds-space-100,8px)}
+._1mxox0bf:hover{margin-inline:var(--ds-space-negative-100,-8px)}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}

package/dist/esm/view/RelatedLinksModal/components/related-link-item/index.js

@@ -3,18 +3,10 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
 import { SmartLinkStatus } from '../../../../constants';
 import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
 import RelatedLinkItemOld from './RelatedLinkItemOld';
-var hoverStyles = xcss({
-  ':hover': {
-    backgroundColor: 'color.background.input.hovered',
-    borderRadius: 'border.radius.100',
-    marginInline: 'space.negative.100',
-    paddingInline: 'space.100'
-  }
-});
+var hoverStyle = null;
 var relatedLinkItemStyles = null;
 var RelatedLinkItem = function RelatedLinkItem(_ref) {
   var url = _ref.url,
@@ -31,9 +23,9 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
     clickableContainer: true,
     size: SmartLinkSize.Large
   };
-  return /*#__PURE__*/React.createElement(Box, {
-    testId: testId,
-    xcss: hoverStyles
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testId": testId,
+    className: ax(["_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g"])
   }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",
     ui: ui,

package/dist/esm/view/RelatedLinksModal/components/related-links-list/index.compiled.css

@@ -0,0 +1,4 @@
+._11c816g6{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}

package/dist/esm/view/RelatedLinksModal/components/related-links-list/index.js

@@ -1,13 +1,17 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinkItem from '../related-link-item';
 import RelatedLinksListOld from './RelatedLinksListOld';
-var sectionTitleStyles = xcss({
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
+var styles = {
+  sectionTitle: "_11c816g6 _1q511b66",
+  boxStyle: "_11c81vlj _1rjcu2gc"
+};
 var RelatedLinksList = function RelatedLinksList(_ref) {
   var urls = _ref.urls,
     title = _ref.title,
@@ -15,8 +19,7 @@ var RelatedLinksList = function RelatedLinksList(_ref) {
   return /*#__PURE__*/React.createElement(Stack, {
     testId: testId
   }, /*#__PURE__*/React.createElement(Box, {
-    paddingBlockStart: "space.050",
-    xcss: sectionTitleStyles
+    xcss: styles.sectionTitle
   }, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map(function (url, idx) {
     return /*#__PURE__*/React.createElement(Stack, {
       key: "".concat(idx, "-").concat(url)
@@ -24,14 +27,8 @@ var RelatedLinksList = function RelatedLinksList(_ref) {
       url: url,
       testId: "".concat(testId, "-item-").concat(idx)
     }));
-  })), urls.length === 0 &&
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  React.createElement(Box, {
-    paddingBlock: "space.100",
-    xcss: xcss({
-      font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-    })
+  })), urls.length === 0 && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.boxStyle
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_not_found)));
 };
 var RelatedLinksListExported = function RelatedLinksListExported(props) {

package/dist/esm/view/RelatedLinksModal/views/resolved/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Stack } from '@atlaskit/primitives';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import RelatedLinksList from '../../components/related-links-list';
 import RelatedLinksResolvedViewOld from './ResolvedOld';

package/dist/esm/view/RelatedLinksModal/views/resolving/RelatedLinksResolvingViewOld.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+var style = xcss({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  justifyContent: 'center'
+});
+var RelatedLinksResolvingViewOld = function RelatedLinksResolvingViewOld() {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: style,
+    testId: "related-links-resolving-view"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: 'large',
+    testId: "related-links-resolving-view-spinner"
+  }));
+};
+export default RelatedLinksResolvingViewOld;

package/dist/esm/view/RelatedLinksModal/views/resolving/index.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}

package/dist/esm/view/RelatedLinksModal/views/resolving/index.js

@@ -1,20 +1,27 @@
-import React from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
-var style = xcss({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  justifyContent: 'center'
-});
-var RelatedLinksResolvingView = function RelatedLinksResolvingView() {
+import RelatedLinksResolvingViewOld from './RelatedLinksResolvingViewOld';
+var styles = {
+  style: "_4cvr1h6o _1e0c1txw _2lx21bp4 _4t3i1osq _1bah1h6o"
+};
+var RelatedLinksResolvingViewNew = function RelatedLinksResolvingViewNew() {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: style,
+    xcss: styles.style,
     testId: "related-links-resolving-view"
   }, /*#__PURE__*/React.createElement(Spinner, {
-    size: 'large',
+    size: "large",
     testId: "related-links-resolving-view-spinner"
   }));
 };
+var RelatedLinksResolvingView = function RelatedLinksResolvingView() {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinksResolvingViewNew, null);
+  }
+  return /*#__PURE__*/React.createElement(RelatedLinksResolvingViewOld, null);
+};
 export default RelatedLinksResolvingView;

package/dist/esm/view/common/Icon.compiled.css

@@ -0,0 +1,6 @@
+._1bah1h6o{justify-content:center}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}

package/dist/esm/view/common/Icon.js

@@ -1,14 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* Icon.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./Icon.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 { css, jsx } from '@emotion/react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
-import { gs } from './utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IconOld } from './IconOld';
 /**
  * Class name for selecting non-flexible block card icon image
  *
@@ -16,32 +13,9 @@ import { gs } from './utils';
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export var blockCardIconImageClassName = 'block-card-icon-image';
-var getImageStyles = function getImageStyles(isFlexibleUi) {
-  if (isFlexibleUi) {
-    return;
-  }
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: gs(2),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: gs(2)
-  });
-};
-var getSpanStyles = function getSpanStyles(isFlexibleUi) {
-  if (isFlexibleUi) {
-    return;
-  }
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: gs(2.5),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: gs(2),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  });
-};
-export var Icon = function Icon(_ref) {
+var imageStyles = null;
+var spanStyles = null;
+export var IconNew = function IconNew(_ref) {
   var url = _ref.url,
     icon = _ref.icon,
     defaultIcon = _ref.defaultIcon,
@@ -49,29 +23,32 @@ export var Icon = function Icon(_ref) {
     testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
     _ref$isFlexibleUi = _ref.isFlexibleUi,
     isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
-  var placeholder = defaultIcon || jsx(LinkIcon, {
+  var placeholder = defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
     label: "link",
     LEGACY_size: "small",
     testId: "".concat(testId, "-default"),
     color: "currentColor"
   });
-  var image = url && jsx(ImageLoader, {
+  var image = url && /*#__PURE__*/React.createElement(ImageLoader, {
     src: url,
-    loaded: jsx("img", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-      css: getImageStyles(isFlexibleUi),
+    loaded: /*#__PURE__*/React.createElement("img", {
       src: url,
       alt: "",
-      "data-testid": "".concat(testId, "-image")
+      "data-testid": "".concat(testId, "-image"),
+      className: ax([isFlexibleUi && "_4t3i7vkz _1bsb7vkz"])
     }),
     errored: placeholder
   });
-  return jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: getSpanStyles(isFlexibleUi),
+  return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: blockCardIconImageClassName
+    className: ax([isFlexibleUi && "_4t3igktf _1bsb7vkz _1e0c1txw _4cvr1h6o _1bah1h6o", blockCardIconImageClassName])
   }, icon || image || placeholder);
+};
+export var Icon = function Icon(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(IconNew, props);
+  }
+  return /*#__PURE__*/React.createElement(IconOld, props);
 };

package/dist/esm/view/common/IconOld.js

@@ -0,0 +1,77 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import ImageLoader from 'react-render-image';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { gs } from './utils';
+/**
+ * Class name for selecting non-flexible block card icon image
+ *
+ * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
+ */
+export var blockCardIconImageClassName = 'block-card-icon-image';
+var getImageStyles = function getImageStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: gs(2),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: gs(2)
+  });
+};
+var getSpanStyles = function getSpanStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: gs(2.5),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: gs(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
+};
+export var IconOld = function IconOld(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon,
+    defaultIcon = _ref.defaultIcon,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
+    _ref$isFlexibleUi = _ref.isFlexibleUi,
+    isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
+  var placeholder = defaultIcon || jsx(LinkIcon, {
+    label: "link",
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-default"),
+    color: "currentColor"
+  });
+  var image = url && jsx(ImageLoader, {
+    src: url,
+    loaded: jsx("img", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      css: getImageStyles(isFlexibleUi),
+      src: url,
+      alt: "",
+      "data-testid": "".concat(testId, "-image")
+    }),
+    errored: placeholder
+  });
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: getSpanStyles(isFlexibleUi),
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: blockCardIconImageClassName
+  }, icon || image || placeholder);
+};

package/dist/esm/view/common/ai-prism/AIPrismOld.js

@@ -0,0 +1,50 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { popupContainerStyles } from '../../HoverCard/styled';
+import AIGlowingBorder from './ai-glowing-border';
+import { AI_BORDER_PALETTE } from './constants';
+var contentStyles = css({
+  transition: 'box-shadow 0.5s ease'
+});
+var contentStylesPrismVisible = css({
+  // intentionally set opacity to 0 to remove the shadow with fade out animation
+  boxShadow:
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  '0px 8px 12px rgba(9, 30, 66, 0),0px 0px 1px rgba(9, 30, 66, 0)'
+});
+var AIPrismOld = function AIPrismOld(_ref) {
+  var _AI_BORDER_PALETTE$co;
+  var children = _ref.children,
+    _ref$isGlowing = _ref.isGlowing,
+    isGlowing = _ref$isGlowing === void 0 ? true : _ref$isGlowing,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isVisible = _ref.isVisible,
+    testId = _ref.testId;
+  var _useThemeObserver = useThemeObserver(),
+    _useThemeObserver$col = _useThemeObserver.colorMode,
+    colorMode = _useThemeObserver$col === void 0 ? 'light' : _useThemeObserver$col;
+  return jsx(AIGlowingBorder, {
+    additionalCss: {
+      animatedSvgContainer: css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.5s ease'
+      })
+    },
+    palette: (_AI_BORDER_PALETTE$co = AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : AI_BORDER_PALETTE.light,
+    isGlowing: isGlowing,
+    isMoving: isMoving,
+    testId: testId
+  }, jsx("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    popupContainerStyles, contentStyles, isVisible ? contentStylesPrismVisible : undefined]
+  }, children));
+};
+export default AIPrismOld;

package/dist/esm/view/common/ai-prism/ai-glowing-border/AIGlowingBorderOld.js

@@ -0,0 +1,53 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { INNER_BORDER_RADIUS } from '../constants';
+import AnimatedSvgContainer from './animated-svg-container';
+var borderContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  padding: "var(--ds-space-025, 2px)",
+  width: 'fit-content'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var borderContentStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  borderRadius: INNER_BORDER_RADIUS,
+  flexGrow: 1,
+  zIndex: 1 // needs to be more than the svg container at least
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+var AIGlowingBorderOld = function AIGlowingBorderOld(_ref) {
+  var children = _ref.children,
+    palette = _ref.palette,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isGlowing = _ref.isGlowing,
+    testId = _ref.testId,
+    additionalCss = _ref.additionalCss;
+  return jsx("div", {
+    css: [borderContainerStyles, additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.container],
+    "data-testid": testId
+  }, jsx(AnimatedSvgContainer, {
+    palette: palette,
+    isMoving: isMoving,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), isGlowing && jsx(AnimatedSvgContainer, {
+    palette: palette,
+    isMoving: isMoving,
+    isGlowing: true,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), jsx("div", {
+    css: borderContentStyles
+  }, children, " "));
+};
+export default AIGlowingBorderOld;

package/dist/esm/view/common/ai-prism/ai-glowing-border/animated-svg-container.compiled.css

@@ -0,0 +1,13 @@
+
+._2rko19bv{border-radius:10px}._154i1b66{top:var(--ds-space-050,4px)}
+._154iidpf{top:0}
+._1bsb1osq{width:100%}
+._1bsbwk75{width:var(--_ys364u)}
+._1ltv1b66{left:var(--ds-space-050,4px)}
+._1ltvidpf{left:0}
+._4t3i1osq{height:100%}
+._4t3iwk75{height:var(--_ys364u)}
+._kdam118y{filter:var(--_y27h52)}
+._kqswstnw{position:absolute}
+._t9ec161g{transform:translate3d(0,0,0)}
+._w6ng15vq{backface-visibility:hidden}