@atlaskit/smart-card 34.3.0 → 34.4.0

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

@@ -1,18 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useCallback, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { 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 { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
+import RelatedLinksBaseModalOld from "./RelatedLinksBaseModalOld";
 const fixedWidth = 'small'; // pre-defined 400px by Atlaskit
 
 const boxStyles = xcss({
@@ -38,18 +32,25 @@ const RelatedLinksBaseModal = ({
     });
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [fireEvent, onClose]);
-  return jsx(ModalTransition, null, showModal && jsx(Modal, {
+  return /*#__PURE__*/React.createElement(ModalTransition, null, showModal && /*#__PURE__*/React.createElement(Modal, {
     testId: "related-links-modal",
     onClose: closeHandler,
     width: fixedWidth,
     autoFocus: false,
     shouldReturnFocus: false,
     onOpenComplete: openCompleteHandler
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, jsx(Box, {
+  }, /*#__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
-  }, children)), jsx(ModalFooter, null, jsx(Button, {
+  }, children)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     onClick: closeHandler
-  }, jsx(FormattedMessage, messages.close)))));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.close)))));
+};
+const RelatedLinksBaseModalExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinksBaseModal, props);
+  } else {
+    return /*#__PURE__*/React.createElement(RelatedLinksBaseModalOld, props);
+  }
 };
-export default RelatedLinksBaseModal;
+export default RelatedLinksBaseModalExported;

package/dist/es2019/view/RelatedLinksModal/components/RelatedLinksBaseModalOld.js

@@ -0,0 +1,55 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/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 { Box, xcss } from '@atlaskit/primitives';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../messages';
+const fixedWidth = 'small'; // pre-defined 400px by Atlaskit
+
+const boxStyles = xcss({
+  height: '396px' // Specified by the designer as this will display 5 incoming links and 2 outgoing links
+});
+const RelatedLinksBaseModal = ({
+  onClose,
+  showModal,
+  children
+}) => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const modalOpenTimeRef = useRef(Date.now());
+  const openCompleteHandler = useCallback(el => {
+    el.focus();
+    modalOpenTimeRef.current = Date.now();
+    fireEvent('ui.modal.opened.relatedLinks', {});
+  }, [fireEvent]);
+  const closeHandler = useCallback(() => {
+    fireEvent('ui.modal.closed.relatedLinks', {
+      dwellTime: Date.now() - modalOpenTimeRef.current
+    });
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [fireEvent, onClose]);
+  return jsx(ModalTransition, null, showModal && jsx(Modal, {
+    testId: "related-links-modal",
+    onClose: closeHandler,
+    width: fixedWidth,
+    autoFocus: false,
+    shouldReturnFocus: false,
+    onOpenComplete: openCompleteHandler
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, jsx(Box, {
+    xcss: boxStyles
+  }, children)), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "primary",
+    onClick: closeHandler
+  }, jsx(FormattedMessage, messages.close)))));
+};
+export default RelatedLinksBaseModal;

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/RelatedLinkItemOld.js

@@ -0,0 +1,55 @@
+/**
+ * @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 { Box, xcss } from '@atlaskit/primitives';
+import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+const hoverStyles = xcss({
+  ':hover': {
+    backgroundColor: 'color.background.input.hovered',
+    borderRadius: 'border.radius.100',
+    marginInline: 'space.negative.100',
+    paddingInline: 'space.100'
+  }
+});
+const relatedLinkItemStyles = css({
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  gap: "var(--ds-space-150, 12px)",
+  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)"
+});
+const RelatedLinkItem = ({
+  url,
+  testId
+}) => {
+  const subtitle = [{
+    name: ElementName.Provider,
+    hideIcon: true
+  }];
+  const ui = {
+    hideElevation: true,
+    hidePadding: true,
+    hideBackground: true,
+    theme: SmartLinkTheme.Black,
+    clickableContainer: true,
+    size: SmartLinkSize.Large
+  };
+  return jsx(Box, {
+    testId: testId,
+    xcss: hoverStyles
+  }, jsx(Card, {
+    appearance: "block",
+    ui: ui,
+    url: url
+  }, jsx(TitleBlock, {
+    maxLines: 1,
+    hideTitleTooltip: true,
+    position: SmartLinkPosition.Center,
+    subtitle: subtitle,
+    overrideCss: relatedLinkItemStyles,
+    anchorTarget: "_blank"
+  })));
+};
+export default RelatedLinkItem;

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

@@ -1,24 +1,19 @@
-/**
- * @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 React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+import RelatedLinkItemOld from './RelatedLinkItemOld';
 const hoverStyles = xcss({
   ':hover': {
     backgroundColor: 'color.background.input.hovered',
     borderRadius: 'border.radius.100',
     marginInline: 'space.negative.100',
     paddingInline: 'space.100'
-  }
-});
-const relatedLinkItemStyles = css({
-  paddingTop: "var(--ds-space-100, 8px)",
-  paddingBottom: "var(--ds-space-100, 8px)",
-  gap: "var(--ds-space-150, 12px)",
-  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)"
+  },
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  gap: 'space.150',
+  font: 'font.body.small'
 });
 const RelatedLinkItem = ({
   url,
@@ -36,20 +31,26 @@ const RelatedLinkItem = ({
     clickableContainer: true,
     size: SmartLinkSize.Large
   };
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
     xcss: hoverStyles
-  }, jsx(Card, {
+  }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",
     ui: ui,
     url: url
-  }, jsx(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
     maxLines: 1,
     hideTitleTooltip: true,
     position: SmartLinkPosition.Center,
     subtitle: subtitle,
-    overrideCss: relatedLinkItemStyles,
     anchorTarget: "_blank"
   })));
 };
-export default RelatedLinkItem;
+const RelatedLinkItemExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinkItem, props);
+  } else {
+    return /*#__PURE__*/React.createElement(RelatedLinkItemOld, props);
+  }
+};
+export default RelatedLinkItemExported;

package/dist/es2019/view/RelatedLinksModal/components/related-links-list/RelatedLinksListOld.js

@@ -0,0 +1,42 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { messages } from '../../../../messages';
+import RelatedLinkItem from '../related-link-item';
+const RelatedLinksList = ({
+  urls,
+  title,
+  testId
+}) => {
+  return jsx(Stack, {
+    testId: testId
+  }, jsx(Box, {
+    paddingBlockStart: "space.050"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
+    xcss: 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)",
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      textTransform: 'uppercase'
+    })
+  }, jsx(FormattedMessage, title)), urls.length > 0 && jsx(Box, null, urls.map((url, idx) => jsx(Stack, {
+    key: `${idx}-${url}`
+  }, jsx(RelatedLinkItem, {
+    url: url,
+    testId: `${testId}-item-${idx}`
+  })))), urls.length === 0 &&
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx(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)"
+    })
+  }, jsx(FormattedMessage, messages.related_links_not_found)));
+};
+export default RelatedLinksList;

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

@@ -1,42 +1,43 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { messages } from '../../../../messages';
 import RelatedLinkItem from '../related-link-item';
+import RelatedLinksListOld from './RelatedLinksListOld';
+const 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)"
+});
 const RelatedLinksList = ({
   urls,
   title,
   testId
 }) => {
-  return jsx(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     testId: testId
-  }, jsx(Box, {
-    paddingBlockStart: "space.050"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    xcss: 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)",
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-      textTransform: 'uppercase'
-    })
-  }, jsx(FormattedMessage, title)), urls.length > 0 && jsx(Box, null, urls.map((url, idx) => jsx(Stack, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    paddingBlockStart: "space.050",
+    xcss: sectionTitleStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, title)), urls.length > 0 && /*#__PURE__*/React.createElement(Box, null, urls.map((url, idx) => /*#__PURE__*/React.createElement(Stack, {
     key: `${idx}-${url}`
-  }, jsx(RelatedLinkItem, {
+  }, /*#__PURE__*/React.createElement(RelatedLinkItem, {
     url: url,
     testId: `${testId}-item-${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
-  jsx(Box, {
+  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)"
     })
-  }, jsx(FormattedMessage, messages.related_links_not_found)));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_not_found)));
+};
+const RelatedLinksListExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinksList, props);
+  } else {
+    return /*#__PURE__*/React.createElement(RelatedLinksListOld, props);
+  }
 };
-export default RelatedLinksList;
+export default RelatedLinksListExported;

package/dist/es2019/view/RelatedLinksModal/views/errored/error-svg/ErrorSvgOld.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
+const errorStyles = css({
+  width: '80px',
+  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
+  display: 'block'
+});
+export const ErrorSVGOld = props => {
+  const id = 'related-links-error-svg';
+  return jsx("svg", _extends({
+    "data-testid": id,
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: errorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: `url(#${id})`
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/es2019/view/RelatedLinksModal/views/errored/error-svg/index.compiled.css

@@ -0,0 +1,6 @@
+._18u01wug{margin-left:auto}
+._19pkidpf{margin-top:0}
+._1bsbys9h{width:5pc}
+._1e0c1ule{display:block}
+._2hwx1wug{margin-right:auto}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}

package/dist/es2019/view/RelatedLinksModal/views/errored/error-svg/index.js

@@ -1,58 +1,62 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
-const errorStyles = css({
-  width: '80px',
-  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
-  display: 'block'
-});
-export const ErrorSVG = props => {
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from "@atlaskit/platform-feature-flags";
+import { ErrorSVGOld } from "./ErrorSvgOld";
+const errorStyles = null;
+const ErrorSVGNew = props => {
   const id = 'related-links-error-svg';
-  return jsx("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     "data-testid": id,
     viewBox: "0 0 164 212",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    css: errorStyles
-  }, props), jsx("path", {
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_1bsbys9h _19pkidpf _2hwx1wug _otyr1ejb _18u01wug _1e0c1ule"])
+  }), /*#__PURE__*/React.createElement("path", {
     d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
     fill: `url(#${id})`
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     opacity: ".6",
     d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
     fill: "#C1C7D0"
-  }), jsx("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     opacity: ".6",
     d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
     fill: "#B3BAC5"
-  }), jsx("defs", null, jsx("linearGradient", {
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: id,
     x1: "26.169",
     y1: "228.621",
     x2: "138.408",
     y2: "116.382",
     gradientUnits: "userSpaceOnUse"
-  }, jsx("stop", {
+  }, /*#__PURE__*/React.createElement("stop", {
     stopColor: "#C1C7D0"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".297",
     stopColor: "#C6CBD4",
     stopOpacity: ".881"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".63",
     stopColor: "#D3D7DE",
     stopOpacity: ".748"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: ".98",
     stopColor: "#E9EBEF",
     stopOpacity: ".608"
-  }), jsx("stop", {
+  }), /*#__PURE__*/React.createElement("stop", {
     offset: "1",
     stopColor: "#EBECF0",
     stopOpacity: ".6"
   }))));
+};
+export const ErrorSVG = props => {
+  if (!fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ErrorSVGNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ErrorSVGOld, props);
+  }
 };

package/dist/es2019/view/RelatedLinksModal/views/resolved/ResolvedOld.js

@@ -0,0 +1,36 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { Stack } from '@atlaskit/primitives';
+import { messages } from '../../../../messages';
+import RelatedLinksList from '../../components/related-links-list';
+const RelatedLinksResolvedView = ({
+  incomingLinks = [],
+  outgoingLinks = []
+}) => {
+  return jsx(Stack, {
+    space: "space.150"
+  }, jsx(AnalyticsContext, {
+    data: {
+      component: 'relatedLinksIncoming'
+    }
+  }, jsx(RelatedLinksList, {
+    urls: incomingLinks,
+    title: messages.related_links_found_in,
+    testId: "incoming-related-links-list"
+  })), jsx(AnalyticsContext, {
+    data: {
+      component: 'relatedLinksOutgoing'
+    }
+  }, jsx(RelatedLinksList, {
+    urls: outgoingLinks,
+    title: messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list"
+  })));
+};
+export default RelatedLinksResolvedView;

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

@@ -1,36 +1,39 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { Stack } from '@atlaskit/primitives';
 import { messages } from '../../../../messages';
 import RelatedLinksList from '../../components/related-links-list';
+import RelatedLinksResolvedViewOld from './ResolvedOld';
 const RelatedLinksResolvedView = ({
   incomingLinks = [],
   outgoingLinks = []
 }) => {
-  return jsx(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     space: "space.150"
-  }, jsx(AnalyticsContext, {
+  }, /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       component: 'relatedLinksIncoming'
     }
-  }, jsx(RelatedLinksList, {
+  }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: incomingLinks,
     title: messages.related_links_found_in,
     testId: "incoming-related-links-list"
-  })), jsx(AnalyticsContext, {
+  })), /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
       component: 'relatedLinksOutgoing'
     }
-  }, jsx(RelatedLinksList, {
+  }, /*#__PURE__*/React.createElement(RelatedLinksList, {
     urls: outgoingLinks,
     title: messages.related_links_includes_links_to,
     testId: "outgoing-related-links-list"
   })));
 };
-export default RelatedLinksResolvedView;
+const RelatedLinksResolvedExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinksResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(RelatedLinksResolvedViewOld, props);
+  }
+};
+export default RelatedLinksResolvedExported;