@atlaskit/smart-card 34.5.1 → 34.6.0

package/dist/es2019/view/FlexibleCard/components/elements/media/MediaOld.js

@@ -0,0 +1,82 @@
+/**
+ * @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 ImageIcon from '../../common/image-icon';
+/**
+ * Media: Image
+ * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
+ * [object-fit: cover] The replaced content is sized to maintain
+ * its aspect ratio while filling the element's entire content box.
+ * If the object's aspect ratio does not match the aspect ratio of its box,
+ * then the object will be clipped to fit.
+ * [object-position] Center alignment of the selected replaced element's
+ * contents within the element's box.
+ */
+const styles = css({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
+    }
+  }
+});
+
+/**
+ * A base element that displays a Media.
+ * @internal
+ * @param {MediaProps} MediaProps - The props necessary for the Media element.
+ * @see Preview
+ */
+const MediaOld = ({
+  name,
+  overrideCss,
+  testId = 'smart-element-media',
+  type,
+  url,
+  onLoad,
+  onError
+}) => {
+  if (!type || !url) {
+    return null;
+  }
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [styles, overrideCss],
+    "data-smart-element": name,
+    "data-smart-element-media": type,
+    "data-testid": testId
+  }, jsx(ImageIcon, {
+    testId: `${testId}-image`,
+    url: url,
+    onError: onError,
+    onLoad: onLoad,
+    defaultIcon: null
+  }));
+};
+export default MediaOld;

package/dist/es2019/view/FlexibleCard/components/elements/media/index.compiled.css

@@ -0,0 +1,11 @@
+._173baqso >img, ._1niwaqso >span{object-position:center center}
+._1bsb1osq{width:100%}
+._1chb1osq >img, ._1usb1osq >span{max-height:100%}
+._1e0c1txw{display:flex}
+._1h1tcq2i{aspect-ratio:16/9}
+._4t3i1ns9{height:-moz-fit-content;height:fit-content}
+._5c331osq >img, ._l9z01osq >span{max-width:100%}
+._6o691dfr >img, ._vr2g1dfr >span{object-fit:cover}
+._6slq1osq >img, ._x1m21osq >span{min-width:100%}
+._jqez1osq >img, ._1lg71osq >span{min-height:100%}
+@supports not (aspect-ratio:auto){._1aoq15vq{overflow-x:hidden}._1iqz15vq{overflow-y:hidden}._6fioj63w{padding-top:56.25%}._l0jmidpf{height:0}._12zuh2mm{position:relative}._t0h9stnw >img, ._1ulbstnw >span{position:absolute}._byj21ooe >img, ._3hvr1ooe >span{transform:translate(-50%,-50%)}._1c0s1ssb >img, ._15j31ssb >span{left:50%}._1npy1ssb >img, ._19he1ssb >span{top:50%}._n3vc1wug >img, ._1qj91wug >span{width:auto}._4fdy1wug >img, ._18cv1wug >span{height:auto}}

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -1,10 +1,10 @@
-/**
- * @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';
+/* index.tsx generated by @compiled/babel-plugin v0.35.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 ImageIcon from '../../common/image-icon';
+import MediaOld from './MediaOld';
 /**
  * Media: Image
  * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
@@ -15,37 +15,7 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-const styles = css({
-  aspectRatio: '16 / 9',
-  display: 'flex',
-  width: '100%',
-  height: 'fit-content',
-  '@supports not (aspect-ratio: auto)': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
-    paddingTop: '56.25%',
-    // 16:9 ratio (9 / 16 = 0.5625)
-    height: 0,
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> img, > span': {
-    minHeight: '100%',
-    minWidth: '100%',
-    maxHeight: '100%',
-    maxWidth: '100%',
-    objectFit: 'cover',
-    objectPosition: 'center center',
-    '@supports not (aspect-ratio: auto)': {
-      position: 'absolute',
-      transform: 'translate(-50%, -50%)',
-      left: '50%',
-      top: '50%',
-      width: 'auto',
-      height: 'auto'
-    }
-  }
-});
+const styles = null;
 
 /**
  * A base element that displays a Media.
@@ -53,9 +23,9 @@ const styles = css({
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */
-const Media = ({
+const MediaNew = ({
   name,
-  overrideCss,
+  className,
   testId = 'smart-element-media',
   type,
   url,
@@ -65,13 +35,14 @@ const Media = ({
   if (!type || !url) {
     return null;
   }
-  return jsx("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [styles, overrideCss],
+  return /*#__PURE__*/React.createElement("div", {
     "data-smart-element": name,
     "data-smart-element-media": type,
     "data-testid": testId
-  }, jsx(ImageIcon, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1h1tcq2i _1e0c1txw _1bsb1osq _4t3i1ns9 _jqez1osq _1lg71osq _6slq1osq _x1m21osq _1chb1osq _1usb1osq _5c331osq _l9z01osq _6o691dfr _vr2g1dfr _173baqso _1niwaqso _t0h9stnw _1ulbstnw _byj21ooe _3hvr1ooe _1c0s1ssb _15j31ssb _1npy1ssb _19he1ssb _n3vc1wug _1qj91wug _4fdy1wug _18cv1wug _1aoq15vq _1iqz15vq _6fioj63w _l0jmidpf _12zuh2mm", className])
+  }, /*#__PURE__*/React.createElement(ImageIcon, {
     testId: `${testId}-image`,
     url: url,
     onError: onError,
@@ -79,4 +50,11 @@ const Media = ({
     defaultIcon: null
   }));
 };
+const Media = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MediaNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(MediaOld, props);
+  }
+};
 export default Media;

package/dist/es2019/view/FlexibleCard/components/elements/preview/index.js

@@ -1,12 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useContext } from 'react';
 import { MediaType } from '../../../../../constants';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import Media from '../media';
@@ -23,6 +16,6 @@ const Preview = props => {
   if (!data) {
     return null;
   }
-  return jsx(Media, _extends({}, rest, data));
+  return /*#__PURE__*/React.createElement(Media, _extends({}, rest, data));
 };
 export default Preview;

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/SnippetElementOld.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import Text from '../text';
+const SNIPPET_DEFAULT_MAX_LINES = 3;
+const getSnippetStyles = overrideCss => css({
+  color: "var(--ds-text, #172B4D)",
+  WebkitUserSelect: 'text',
+  MozUserSelect: 'text',
+  MsUserSelect: 'text',
+  userSelect: 'text'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+overrideCss);
+const SnippetElementOld = ({
+  content: overrideContent,
+  maxLines = SNIPPET_DEFAULT_MAX_LINES,
+  overrideCss,
+  ...props
+} = {}) => {
+  const context = useContext(FlexibleUiContext);
+  return jsx(Text, _extends({
+    content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
+    maxLines: maxLines,
+    overrideCss: getSnippetStyles(overrideCss)
+  }, props));
+};
+export default SnippetElementOld;

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/index.compiled.css

@@ -0,0 +1,5 @@
+._181u1kdv{-webkit-user-select:text}
+._1rkw1kdv{-moz-user-select:text}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._te171kdv{-ms-user-select:text}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -1,35 +1,34 @@
+/* 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 * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import Text from '../text';
+import SnippetElementOld from './SnippetElementOld';
 const SNIPPET_DEFAULT_MAX_LINES = 3;
-const getSnippetStyles = overrideCss => css({
-  color: "var(--ds-text, #172B4D)",
-  WebkitUserSelect: 'text',
-  MozUserSelect: 'text',
-  MsUserSelect: 'text',
-  userSelect: 'text'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-overrideCss);
-const SnippetElement = ({
+const snippetBaseStyle = null;
+const SnippetElementNew = ({
   content: overrideContent,
   maxLines = SNIPPET_DEFAULT_MAX_LINES,
-  overrideCss,
+  className,
   ...props
 } = {}) => {
   const context = useContext(FlexibleUiContext);
-  return jsx(Text, _extends({
+  return /*#__PURE__*/React.createElement(Text, _extends({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
-    overrideCss: getSnippetStyles(overrideCss)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax(["_syaz1fxt _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className])
   }, props));
 };
+const SnippetElement = (props = {}) => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(SnippetElementNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(SnippetElementOld, props);
+  }
+};
 export default SnippetElement;

package/dist/es2019/view/FlexibleCard/components/elements/text/TextOld.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 { css, jsx } from '@emotion/react';
+import { getFormattedMessage, getTruncateStyles } from '../../utils';
+const getStyles = maxLines => css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  whiteSpace: 'normal'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getTruncateStyles(maxLines));
+
+/**
+ * A base element that displays some Text.
+ * @internal
+ * @param {TextProps} TextProps - The props necessary for the Text element.
+ * @see Title
+ */
+const TextOld = ({
+  content,
+  maxLines = 1,
+  message,
+  name,
+  overrideCss,
+  testId = 'smart-element-text'
+}) => {
+  if (!message && !content) {
+    return null;
+  }
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [getStyles(maxLines), overrideCss],
+    "data-separator": true,
+    "data-smart-element": name,
+    "data-smart-element-text": true,
+    "data-testid": testId
+  }, getFormattedMessage(message) || content);
+};
+export default TextOld;

package/dist/es2019/view/FlexibleCard/components/elements/text/index.compiled.css

@@ -0,0 +1,11 @@
+._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)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjr31u{-webkit-line-clamp:var(--_1erfju8)}
+._o5724jg8{white-space:normal}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+@supports not (-webkit-line-clamp:1){._102k1dud{max-height:calc(var(--_1erfju8)*1rem)}}

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -1,17 +1,11 @@
-/**
- * @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 { getFormattedMessage, getTruncateStyles } from '../../utils';
-const getStyles = maxLines => css({
-  color: "var(--ds-text-subtlest, #626F86)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  whiteSpace: 'normal'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-getTruncateStyles(maxLines));
+/* index.tsx generated by @compiled/babel-plugin v0.35.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 { getFormattedMessage } from '../../utils';
+import TextOld from './TextOld';
+const baseStyle = null;
 
 /**
  * A base element that displays some Text.
@@ -19,24 +13,36 @@ getTruncateStyles(maxLines));
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-const Text = ({
+const TextNew = ({
   content,
   maxLines = 1,
   message,
   name,
-  overrideCss,
+  className,
   testId = 'smart-element-text'
 }) => {
   if (!message && !content) {
     return null;
   }
-  return jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [getStyles(maxLines), overrideCss],
+  const dynamicCss = null;
+  return /*#__PURE__*/React.createElement("span", {
     "data-separator": true,
     "data-smart-element": name,
     "data-smart-element-text": true,
     "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_11c8qk37 _1reo15vq _18m915vq _syaz131l _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54", "_1yyjr31u _102k1dud", className]),
+    style: {
+      "--_1erfju8": ix(maxLines)
+    }
   }, getFormattedMessage(message) || content);
 };
+const Text = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TextNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TextOld, props);
+  }
+};
 export default Text;

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -109,6 +111,10 @@ export const importIcon = importFn => {
     loading: () => null
   }); // Because we're using dynamic loading here, TS will not be able to infer the type.
 };
+
+/**
+ * @deprecated remove FF bandicoots-compiled-migration-smartcard clean up
+ */
 export const getLinkLineHeight = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
@@ -120,13 +126,16 @@ export const getLinkLineHeight = size => {
       return '1rem';
   }
 };
+
+/**
+ * @deprecated remove FF bandicoots-compiled-migration-smartcard clean up
+ */
 export const getLinkSizeStyles = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return css({
         font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case SmartLinkSize.Large:
@@ -134,7 +143,6 @@ export const getLinkSizeStyles = size => {
       return css({
         font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case SmartLinkSize.Small:
@@ -142,7 +150,6 @@ export const getLinkSizeStyles = size => {
       return css({
         font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
   }
@@ -205,6 +212,10 @@ export const getPrimitivesPaddingSpaceBySize = size => {
       return 'space.100';
   }
 };
+
+/**
+ * @deprecated remove FF bandicoots-compiled-migration-smartcard clean up
+ */
 export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css({
   display: '-webkit-box',
   overflow: 'hidden',

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

@@ -0,0 +1,8 @@
+._11q7glyw{background:none}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._189eidpf{border-width:0}
+._16qsie2t{box-shadow:var(--ds-shadow-overlay,0 8px 9pt rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31))}
+._1bsb1f23{width:25rem}
+._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

@@ -1,17 +1,18 @@
+/* ContentContainer.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./ContentContainer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useAISummaryAction from '../../../state/hooks/use-ai-summary-action';
 import AIPrism from '../../common/ai-prism';
-import { HoverCardContainer, popupContainerStyles } from '../styled';
+import ContentContainerOld from './ContentContainerOld';
 import { hoverCardClassName } from './HoverCardContent';
+const NEW_CARD_WIDTH_REM = 25;
+const HoverCardContainerStyle = null;
+const popupContainerStyles = null;
 const ConnectedAIPrismContainer = ({
   children,
   isAIEnabled = false,
@@ -28,15 +29,12 @@ const ConnectedAIPrismContainer = ({
   useEffect(() => {
     setShowPrism(status === 'loading');
   }, [status]);
-  const container = jsx("div", _extends({
+  const container = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: hoverCardClassName
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
+    className: ax(["_11q7glyw _189eidpf _vchhusvi _1bsb1f23 _9spsglyw", !isAIEnabled && "_2rkopd34 _bfhk1bhr _16qsie2t", hoverCardClassName]),
     "data-testid": testId
   }, props), children);
-  return isAIEnabled ? jsx(AIPrism, {
+  return isAIEnabled ? /*#__PURE__*/React.createElement(AIPrism, {
     isVisible: showPrism,
     testId: `${testId}-prism`
   }, container) : container;
@@ -47,9 +45,16 @@ const ContentContainer = ({
   testId,
   url,
   ...props
-}) => jsx(ConnectedAIPrismContainer, _extends({
+}) => /*#__PURE__*/React.createElement(ConnectedAIPrismContainer, _extends({
   isAIEnabled: isAIEnabled,
   url: url,
   testId: testId
 }, props), children);
-export default ContentContainer;
+const Exported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ContentContainer, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ContentContainerOld, props);
+  }
+};
+export default Exported;

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

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import useAISummaryAction from '../../../state/hooks/use-ai-summary-action';
+import AIPrism from '../../common/ai-prism';
+import { HoverCardContainer, popupContainerStyles } from '../styled';
+import { hoverCardClassName } from './HoverCardContent';
+const ConnectedAIPrismContainer = ({
+  children,
+  isAIEnabled = false,
+  testId,
+  url,
+  ...props
+}) => {
+  const {
+    state: {
+      status
+    }
+  } = useAISummaryAction(url);
+  const [showPrism, setShowPrism] = useState(status === 'loading');
+  useEffect(() => {
+    setShowPrism(status === 'loading');
+  }, [status]);
+  const container = jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: hoverCardClassName
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
+    "data-testid": testId
+  }, props), children);
+  return isAIEnabled ? jsx(AIPrism, {
+    isVisible: showPrism,
+    testId: `${testId}-prism`
+  }, container) : container;
+};
+const ContentContainerOld = ({
+  children,
+  isAIEnabled = false,
+  testId,
+  url,
+  ...props
+}) => jsx(ConnectedAIPrismContainer, _extends({
+  isAIEnabled: isAIEnabled,
+  url: url,
+  testId: testId
+}, props), children);
+export default ContentContainerOld;

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

@@ -1,12 +1,5 @@
 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';
 /**
  * The purpose of this component is to hide the default Popup border.
  * HoverCard border implementation is in ContentContainer where it can
@@ -17,7 +10,7 @@ const CustomPopupContainer = /*#__PURE__*/React.forwardRef(({
   shouldFitContainer: _,
   shouldRenderToParent: __,
   ...props
-}, ref) => jsx("div", _extends({}, props, {
+}, ref) => /*#__PURE__*/React.createElement("div", _extends({}, props, {
   ref: ref
 }), children));
 export default CustomPopupContainer;