@atlaskit/smart-card 34.6.2 → 34.6.3

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

@@ -1,29 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* 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 { useCallback, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { xcss } from '@atlaskit/primitives';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
 import { ActionFooter } from './action-footer';
-const ignoreContainerPaddingStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  flexGrow: 1,
-  width: '100%',
-  // We have to find a better way to ignore container padding
-  // This has become more and more of a common use case.
-  marginLeft: 'calc(var(--container-gap-left) * -1)',
-  marginRight: 'calc(var(--container-gap-right) * -1)'
-});
+import ActionBlockOld from './ActionBlockOld';
+const ignoreContainerPaddingStyles = null;
 const DEFAULT_SORT_ORDER = ['PreviewAction', 'CopyLinkAction', 'AISummaryAction'];
 const sort = (a, b) => {
   let idxA = DEFAULT_SORT_ORDER.indexOf(a);
@@ -36,7 +25,7 @@ const sort = (a, b) => {
   }
   return idxA - idxB;
 };
-const ActionBlock = ({
+const ActionBlockNew = ({
   blockRef,
   onClick: onClickCallback,
   size,
@@ -66,7 +55,7 @@ const ActionBlock = ({
     arr.sort(sort);
     return arr.map(name => {
       const Action = name in Actions ? Actions[name] : undefined;
-      return Action ? jsx(Action, {
+      return Action ? /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -83,14 +72,21 @@ const ActionBlock = ({
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
-  return actions ? jsx("div", {
-    css: ignoreContainerPaddingStyles,
+  return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
-    "data-testid": testId
-  }, actions, jsx(ActionFooter, {
+    "data-testid": testId,
+    className: ax(["_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g"])
+  }, actions, /*#__PURE__*/React.createElement(ActionFooter, {
     message: message,
     paddingInline: padding,
     testId: testId
   })) : null;
 };
+const ActionBlock = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionBlockNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ActionBlockOld, props);
+  }
+};
 export default ActionBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/ActionGroupOld.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/standard-button';
+import DropdownMenu from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import { sizeToButtonSpacing } from '../../utils';
+import { filterActionItems } from '../utils';
+import ActionGroupItem from './action-group-item';
+const styles = css({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1rem',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    'button:focus-visible': {
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
+    }
+  }
+});
+const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => jsx(ActionGroupItem, {
+  item: item,
+  key: idx,
+  size: size,
+  appearance: appearance,
+  asDropDownItems: asDropDownItems,
+  onActionItemClick: onActionItemClick
+}));
+
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @internal
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+const ActionGroupOld = ({
+  items = [],
+  size = SmartLinkSize.Medium,
+  appearance,
+  visibleButtonsNum = 2,
+  onDropdownOpenChange
+}) => {
+  const context = useFlexibleUiContext();
+  const ui = useFlexibleUiOptionContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const renderableActionItems = useMemo(() => filterActionItems(items, context), [context, items]);
+  const isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
+  const onOpenChange = useCallback(attrs => {
+    setIsOpen(attrs.isOpen);
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  const onActionItemClick = useCallback(() => {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
+  const actionButtons = useMemo(() => {
+    const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(0, visibleButtonsNum - 1) : renderableActionItems;
+    return renderActionItems(actionItems, size, appearance, false, onActionItemClick);
+  }, [appearance, isMoreThenTwoItems, onActionItemClick, renderableActionItems, size, visibleButtonsNum]);
+  const moreActionDropdown = useMemo(() => {
+    const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
+    if (actionItems.length > 0) {
+      const spacing = sizeToButtonSpacing[size];
+      const moreIcon = jsx(MoreIcon, {
+        label: "more",
+        color: "currentColor"
+      });
+      const formatMessage = jsx(FormattedMessage, messages.more_actions);
+      return jsx(DropdownMenu, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        trigger: ({
+          triggerRef,
+          ...props
+        }) => jsx(Tooltip, {
+          content: formatMessage,
+          hideTooltipOnClick: true,
+          testId: "action-group-more-button-tooltip",
+          tag: "span"
+        }, jsx(Button, _extends({}, props, {
+          spacing: spacing,
+          testId: "action-group-more-button",
+          iconBefore: moreIcon,
+          ref: triggerRef
+        }))),
+        testId: "action-group-dropdown",
+        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+      }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
+    }
+    return null;
+  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
+  return renderableActionItems.length > 0 ? jsx("div", {
+    css: styles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "actions-button-group",
+    "data-action-open": isOpen
+  }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+};
+export default ActionGroupOld;

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -1,12 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback } 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 } from 'react';
 import * as Actions from '../../../actions';
 const ActionGroupItem = ({
   item,
@@ -47,7 +40,7 @@ const ActionGroupItem = ({
   if (item !== null && item !== void 0 && item.entryPointWrapper) {
     actionProps.wrapper = item.entryPointWrapper;
   }
-  return jsx(Action, _extends({
+  return /*#__PURE__*/React.createElement(Action, _extends({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.compiled.css

@@ -0,0 +1,4 @@
+._1e0c116y{display:inline-flex}
+._dzc21h6o >div{align-items:center}
+._vwz41j6v{line-height:1rem}
+._1ilq1i6y >div button:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,18 +1,16 @@
+/* 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 { useCallback, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -20,20 +18,9 @@ import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../..
 import { sizeToButtonSpacing } from '../../utils';
 import { filterActionItems } from '../utils';
 import ActionGroupItem from './action-group-item';
-const styles = css({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '1rem',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> div': {
-    alignItems: 'center',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    'button:focus-visible': {
-      outlineOffset: "var(--ds-space-negative-025, -2px)"
-    }
-  }
-});
-const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => jsx(ActionGroupItem, {
+import ActionGroupOld from './ActionGroupOld';
+const styles = null;
+const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => /*#__PURE__*/React.createElement(ActionGroupItem, {
   item: item,
   key: idx,
   size: size,
@@ -49,7 +36,7 @@ const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance,
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-const ActionGroup = ({
+const ActionGroupNew = ({
   items = [],
   size = SmartLinkSize.Medium,
   appearance,
@@ -82,23 +69,23 @@ const ActionGroup = ({
     const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       const spacing = sizeToButtonSpacing[size];
-      const moreIcon = jsx(MoreIcon, {
+      const moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
         label: "more",
         color: "currentColor"
       });
-      const formatMessage = jsx(FormattedMessage, messages.more_actions);
-      return jsx(DropdownMenu, {
+      const formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
+      return /*#__PURE__*/React.createElement(DropdownMenu, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: ({
           triggerRef,
           ...props
-        }) => jsx(Tooltip, {
+        }) => /*#__PURE__*/React.createElement(Tooltip, {
           content: formatMessage,
           hideTooltipOnClick: true,
           testId: "action-group-more-button-tooltip",
           tag: "span"
-        }, jsx(Button, _extends({}, props, {
+        }, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
           spacing: spacing,
           testId: "action-group-more-button",
           iconBefore: moreIcon,
@@ -110,12 +97,17 @@ const ActionGroup = ({
     }
     return null;
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
-  return renderableActionItems.length > 0 ? jsx("div", {
-    css: styles
+  return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "actions-button-group",
+    className: ax(["_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", "actions-button-group"]),
     "data-action-open": isOpen
-  }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+};
+const ActionGroup = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ActionGroupOld, props);
+  }
 };
 export default ActionGroup;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/FeatureDiscoveryOld.js

@@ -0,0 +1,63 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useMemo, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { getPulseStyles } from './styled';
+const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+const LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+ */
+const FeatureDiscoveryOld = ({
+  children,
+  testId
+}) => {
+  const renderedTime = useRef();
+  const storageClient = useMemo(() => new StorageClient(LOCAL_STORAGE_CLIENT_KEY), []);
+  const discovered = useMemo(() => {
+    try {
+      return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+    } catch {
+      // If localStorage is not available, don't show feature discovery component. Treat it as 'discovered'.
+      return true;
+    }
+  }, [storageClient]);
+  useEffect(() => {
+    renderedTime.current = Date.now();
+    return () => {
+      if (!discovered && renderedTime.current) {
+        const duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          try {
+            storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+          } catch {
+            // silent error
+          }
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  const component = useMemo(() => {
+    if (!discovered) {
+      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("span", {
+          css: getPulseStyles(),
+          "data-testid": `${testId}-discovery`
+        }, children)
+      );
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+export default FeatureDiscoveryOld;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/index.compiled.css

@@ -0,0 +1,5 @@
+
+._2rko1l7b{border-radius:3px}
+._y44v1k6k{animation:k1kh5krz 2s cubic-bezier(.5,0,0,1) .25s 2 both}._16qslqk2{box-shadow:0 0 0 0 var(--ds-border-discovery,#8270db)}
+._1e0c116y{display:inline-flex}
+@keyframes k1kh5krz{to{box-shadow:0 0 0 7px transparent}}

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

@@ -1,24 +1,25 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* 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 { useEffect, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
-import { getPulseStyles } from './styled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureDiscoveryOld from './FeatureDiscoveryOld';
 const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
 const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
 const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
 const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
 const LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+const pulseKeyframes = null;
+const pulseStyles = null;
+
 /**
  * This is a hacky solution to help with the feature discovery.
  * This implementation must be removed once the experiment is completed.
  * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
  */
-const FeatureDiscovery = ({
+const FeatureDiscoveryNew = ({
   children,
   testId
 }) => {
@@ -49,15 +50,19 @@ const FeatureDiscovery = ({
   }, [storageClient, discovered]);
   const component = useMemo(() => {
     if (!discovered) {
-      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("span", {
-          css: getPulseStyles(),
-          "data-testid": `${testId}-discovery`
-        }, children)
-      );
+      return /*#__PURE__*/React.createElement("span", {
+        "data-testid": `${testId}-discovery`,
+        className: ax(["_2rko1l7b _y44v1k6k _1e0c116y _16qslqk2"])
+      }, children);
     }
   }, [children, discovered, testId]);
   return component !== null && component !== void 0 ? component : children;
 };
+const FeatureDiscovery = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FeatureDiscoveryNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(FeatureDiscoveryOld, props);
+  }
+};
 export default FeatureDiscovery;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/styled.js

@@ -1,5 +1,8 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
+/**
+ * @deprecated remove on FF cleanup of bandicoots-compiled-migration-smartcard
+ */
 export const getPulseStyles = () => {
   const color = "var(--ds-border-discovery, #8270DB)";
   const pulseKeyframes = keyframes({

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { SmartLinkDirection } from '../../../../../../constants';
+import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
+import AISummary from '../../../../../common/ai-summary';
+import MotionWrapper from '../../../common/motion-wrapper';
+import Block from '../../block';
+import AIEventSummaryViewed from '../ai-event-summary-viewed';
+const AISummaryBlockResolvedViewOld = props => {
+  const {
+    testId,
+    aiSummaryMinHeight = 0,
+    placeholder,
+    url
+  } = props;
+  const {
+    state: {
+      content,
+      status
+    }
+  } = useAISummaryAction(url);
+  const showAISummary = status === 'done' ||
+  // We want to display the AI Summary component only when there is content available during the loading process.
+  status === 'loading' && !!content;
+  const isSummarisedOnMountRef = useRef(status === 'done');
+  const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
+  if (!showAISummary) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder);
+  }
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    direction: SmartLinkDirection.Vertical,
+    testId: `${testId}-resolved-view`
+    /**
+     * Enabled for feature discovery to allow box shadow to overflow
+     * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
+     */,
+    overrideCss: css({
+      overflow: 'visible'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    props.overrideCss)
+  }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
+    fromCache: isSummarisedOnMountRef.current
+  }), /*#__PURE__*/React.createElement(MotionWrapper, {
+    minHeight: minHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/React.createElement(AISummary, {
+    testId: `${testId}-ai-summary`,
+    minHeight: minHeight,
+    content: content
+  })));
+};
+export default AISummaryBlockResolvedViewOld;

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

@@ -0,0 +1,2 @@
+._18m9ewfl{overflow-y:visible}
+._1reoewfl{overflow-x:visible}

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

@@ -1,16 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useRef } from 'react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkDirection } from '../../../../../../constants';
 import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
 import AISummary from '../../../../../common/ai-summary';
 import MotionWrapper from '../../../common/motion-wrapper';
 import Block from '../../block';
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
-const AISummaryBlockResolvedView = props => {
+import AISummaryBlockResolvedViewOld from './AISummaryBlockResolvedViewOld';
+const styles = null;
+const AISummaryBlockResolvedViewNew = props => {
   const {
     testId,
     aiSummaryMinHeight = 0,
@@ -29,7 +33,7 @@ const AISummaryBlockResolvedView = props => {
   const isSummarisedOnMountRef = useRef(status === 'done');
   const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
   if (!showAISummary) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder);
+    return /*#__PURE__*/React.createElement(Fragment, null, placeholder);
   }
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
@@ -38,11 +42,7 @@ const AISummaryBlockResolvedView = props => {
      * Enabled for feature discovery to allow box shadow to overflow
      * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
      */,
-    overrideCss: css({
-      overflow: 'visible'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    props.overrideCss)
+    className: ax(["_1reoewfl _18m9ewfl"])
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(MotionWrapper, {
@@ -55,4 +55,11 @@ const AISummaryBlockResolvedView = props => {
     content: content
   })));
 };
+const AISummaryBlockResolvedView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AISummaryBlockResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AISummaryBlockResolvedViewOld, props);
+  }
+};
 export default AISummaryBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.compiled.css

@@ -12,6 +12,7 @@
 ._1dthv2br{-webkit-box-align:start}
 ._1e0c1txw{display:flex}
 ._1e0c1ule{display:block}
+._1e0ccj1k{display:-webkit-box}
 ._1iu61nu9 >div[data-smart-element-date-time], ._166k1nu9 >div[data-smart-element-text], ._1div1nu9 >span[data-smart-element-date-time], ._bmfb1nu9 >span[data-smart-element-text]{display:inline}
 ._1nmz1hna{word-break:break-word}
 ._1o9z11wp{flex-shrink:3}
@@ -42,5 +43,7 @@
 ._r291v2br{-ms-flex-align:start}
 ._s7n4nkob{vertical-align:middle}
 ._sudp1e54{-webkit-box-orient:vertical}
+._vwz41j6v{line-height:1rem}
 ._y3gn1e5h{text-align:left}
-._y3gnusic{text-align:right}
+._y3gnusic{text-align:right}
+@supports not (-webkit-line-clamp:1){._102k1k8s{max-height:1.5rem}._102k1m1q{max-height:1.75rem}}