@atlaskit/smart-card 26.55.2 → 26.56.0

package/dist/esm/view/BlockCard/views/styled.js

@@ -1,5 +1,7 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeBlockWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
+export var LozengeBlockWrapper = styled.span({
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)"
+  }
+});

package/dist/esm/view/Card/types.js

@@ -4,5 +4,6 @@ export var CardAction = /*#__PURE__*/function (CardAction) {
   CardAction["ViewAction"] = "ViewAction";
   CardAction["ChangeStatusAction"] = "ChangeStatusAction";
   CardAction["FollowAction"] = "FollowAction";
+  CardAction["CopyLinkAction"] = "CopyLinkAction";
   return CardAction;
 }({});

package/dist/esm/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,9 +1,31 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  height: inherit;\n"])));
-export var contentStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: ", ";\n  gap: ", ";\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", gs(50));
-export var imageStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 120px;\n  width: 180px;\n  object-fit: contain;\n  object-position: center center;\n"])));
-export var titleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 0;\n  padding: 0;\n"])));
-export var descriptionStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 1em;\n  text-align: center;\n"])));
+export var containerStyles = css({
+  display: 'grid',
+  height: 'inherit'
+});
+export var contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  maxWidth: gs(50)
+});
+export var imageStyles = css({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+export var titleStyles = css({
+  textAlign: 'center',
+  margin: 0,
+  padding: 0
+});
+export var descriptionStyles = css({
+  fontSize: '1em',
+  textAlign: 'center'
+});

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -1,12 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 
 import { di } from 'react-magnetic-di';
 import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
+var iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
     name = _ref.name,

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,9 +8,23 @@ import { sizeToButtonSpacing } from '../../../utils';
 var getButtonStyle = function getButtonStyle(size, iconOnly) {
   switch (size) {
     case SmartLinkSize.Large:
-      return iconOnly ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+      return iconOnly ? css({
+        'button, button:hover, button:focus, button:active': {
+          padding: 0,
+          '> span': {
+            margin: 0
+          }
+        }
+      }) : '';
     case SmartLinkSize.Small:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+      return css({
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: '1rem',
+        'button, button:hover, button:focus, button:active': [{
+          lineHeight: '1rem'
+        }, iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
+      });
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Medium:
     default:
@@ -30,7 +42,9 @@ var ActionButton = function ActionButton(_ref) {
     size = _ref.size,
     testId = _ref.testId,
     tooltipMessage = _ref.tooltipMessage,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel;
   var iconOnly = !content;
   var onButtonClick = useCallback(function (handler) {
     return function (e) {
@@ -53,7 +67,9 @@ var ActionButton = function ActionButton(_ref) {
     isLoading: isLoading,
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
   }, content)));
 };
 export default ActionButton;

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -46,7 +46,8 @@ var ActionStackItem = function ActionStackItem(_ref) {
     spaceOption = _ref.space,
     testId = _ref.testId,
     tooltipMessage = _ref.tooltipMessage,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    tooltipOnHide = _ref.tooltipOnHide;
   var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   var onClick = useCallback(function () {
     if (!isDisabled && !isLoading && onClickCallback) {
@@ -64,6 +65,7 @@ var ActionStackItem = function ActionStackItem(_ref) {
   // Replace Box with Pressable once it becomes stable (currently beta)
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage || content,
+    onHide: tooltipOnHide,
     hideTooltipOnMouseDown: true
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, _extends({

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -29,10 +29,14 @@ var Action = function Action(_ref) {
     iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
     spaceInline = _ref.spaceInline,
     tooltipMessage = _ref.tooltipMessage,
+    tooltipOnHide = _ref.tooltipOnHide,
     xcss = _ref.xcss,
     asDropDownItem = _ref.asDropDownItem,
     overrideCss = _ref.overrideCss,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel,
+    Wrapper = _ref.wrapper;
   if (!onClick) {
     return null;
   }
@@ -58,7 +62,8 @@ var Action = function Action(_ref) {
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content,
-      xcss: xcss
+      xcss: xcss,
+      tooltipOnHide: tooltipOnHide
     });
   }
   if (isDropdownItem) {
@@ -71,7 +76,7 @@ var Action = function Action(_ref) {
       testId: testId
     });
   }
-  return jsx(ActionButton, {
+  var button = jsx(ActionButton, {
     appearance: appearance,
     content: content,
     iconAfter: iconAfter,
@@ -82,7 +87,10 @@ var Action = function Action(_ref) {
     size: size,
     testId: testId,
     tooltipMessage: tooltipMessage || content,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    href: href,
+    ariaLabel: ariaLabel
   });
+  return Wrapper !== undefined ? jsx(Wrapper, null, button) : button;
 };
 export default Action;

package/dist/esm/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useState } from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { ActionName } from '../../../../../constants';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+var CopyLinkAction = function CopyLinkAction(_ref) {
+  var _context$actions;
+  var onClickCallback = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var context = useFlexibleUiContext();
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
+  var data = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.CopyLinkAction];
+  var _useState = useState(messages.copy_url_to_clipboard),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipMessage = _useState2[0],
+    setTooltipMessage = _useState2[1];
+  var onClick = useCallback(function () {
+    if (data && data.url) {
+      invoke({
+        actionType: ActionName.CopyLinkAction,
+        actionFn: function () {
+          var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            var _data$url;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
+                case 2:
+                  setTooltipMessage(messages.copied_url_to_clipboard);
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function actionFn() {
+            return _actionFn.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
+        // These values have already been set in analytics context.
+        // We only pass these here for ufo experience.
+        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+      });
+    }
+    if (onClickCallback) {
+      onClickCallback();
+    }
+  }, [analytics, data, invoke, onClickCallback]);
+  return data ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_url_to_clipboard),
+    icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    onClick: onClick,
+    testId: "smart-action-copy-link-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: function tooltipOnHide() {
+      return setTooltipMessage(messages.copy_url_to_clipboard);
+    }
+  }, data, props)) : null;
+};
+export default CopyLinkAction;

package/dist/esm/view/FlexibleCard/components/actions/copy-link-action/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -3,4 +3,5 @@ export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
+export { default as PreviewAction } from './preview-action';
+export { default as CopyLinkAction } from './copy-link-action';

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-error.js

@@ -14,7 +14,7 @@ var contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
-var MessageWithAnchor = function MessageWithAnchor(_ref) {
+var FormattedErrorMessage = function FormattedErrorMessage(_ref) {
   var message = _ref.message,
     url = _ref.url;
   return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
@@ -34,6 +34,10 @@ var getErrorMesssageProps = function getErrorMesssageProps(error) {
         message: messages.ai_summary_error_acceptable_use_violation,
         url: CONTENT_URL_ACCEPTABLE_USE_POLICY
       };
+    case 'HIPAA_CONTENT_DETECTED':
+      return {
+        message: messages.ai_summary_error_hipaa_content_detected
+      };
     default:
       return {
         message: messages.ai_summary_error_generic,
@@ -62,7 +66,7 @@ var AIStateError = function AIStateError(_ref2) {
         content: /*#__PURE__*/React.createElement(Box, {
           testId: "".concat(testId, "-error-message"),
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+        }, /*#__PURE__*/React.createElement(FormattedErrorMessage, {
           message: message,
           url: url
         })),

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

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { getPulseStyles } from './styled';
+var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+var 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
+ */
+var FeatureDiscovery = function FeatureDiscovery(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  var renderedTime = useRef();
+  var storageClient = useMemo(function () {
+    return new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+  }, []);
+  var discovered = useMemo(function () {
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+  }, [storageClient]);
+  useEffect(function () {
+    renderedTime.current = Date.now();
+    return function () {
+      if (!discovered && renderedTime.current) {
+        var duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  var component = useMemo(function () {
+    if (!discovered) {
+      return jsx("span", {
+        css: getPulseStyles(),
+        "data-testid": "".concat(testId, "-discovery")
+      }, children);
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+export default FeatureDiscovery;

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

@@ -0,0 +1,15 @@
+import { css, keyframes } from '@emotion/react';
+export var getPulseStyles = function getPulseStyles() {
+  var color = "var(--ds-border-discovery, #8270DB)";
+  var pulseKeyframes = keyframes({
+    to: {
+      boxShadow: '0 0 0 7px rgba(0, 0, 0, 0)'
+    }
+  });
+  return css({
+    display: 'inline-flex',
+    borderRadius: '3px',
+    boxShadow: "0 0 0 0 ".concat(color),
+    animation: "".concat(pulseKeyframes, " 2s cubic-bezier(0.5, 0, 0, 1) 0.25s both 2")
+  });
+};

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

@@ -20,6 +20,8 @@ import { useAnalyticsEvents } from '../../../../../../common/analytics/generated
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
 import AIEventErrorViewed from '../ai-event-error-viewed';
 import { di } from 'react-magnetic-di';
+import { css } from '@emotion/react';
+import FeatureDiscovery from '../feature-discovery';
 export var AISummaryBlockErrorIndicator = function AISummaryBlockErrorIndicator(_ref) {
   var showErrorIndicator = _ref.showErrorIndicator,
     error = _ref.error,
@@ -107,7 +109,12 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
-        })
+        }),
+        /**
+         * Enabling feature discovery pulse
+         * Cleanup: https://product-fabric.atlassian.net/browse/EDM-9693
+         */
+        wrapper: FeatureDiscovery
       };
       return [aiAction].concat(_toConsumableArray(actions));
     }
@@ -123,6 +130,13 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(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'
+    }, props.overrideCss)
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(AIMotionWrapper, {

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -5,7 +5,9 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
-var getBlockStyles = function getBlockStyles(direction, size) {
+var getBlockStyles = function getBlockStyles(direction, size
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), highlightRemoveStyles, getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
 };
 

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
@@ -8,25 +8,52 @@ import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return css({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
     case SmartLinkAlignment.Left:
     default:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return css({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
   }
 };
 var getGapStyles = function getGapStyles(size, align) {
   var gap = getGapSize(size);
   if (align === SmartLinkAlignment.Right) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
+    return css({
+      '> span': {
+        marginLeft: "".concat(gap, "rem")
+      },
+      '> span:first-child': {
+        marginLeft: 'initial'
+      }
+    });
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+  return css({
+    '> span': {
+      marginRight: "".concat(gap, "rem"),
+      '&:last-child': {
+        marginRight: 'initial'
+      }
+    }
+  });
 };
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = getMaxLineHeight(size);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+  return css(getBaseStyles(direction, size), getAlignmentStyles(align), {
+    minWidth: '10%'
+  }, width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
-var _templateObject;
 import React from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
@@ -19,7 +17,9 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // We need the height of the line to be equal on both left and right
   // sides so they line up nicely.
   var lineHeight = getMaxLineHeight(size);
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, getTruncateStyles(maxLines, lineHeight + 'rem'));
+  return css({
+    lineHeight: "".concat(lineHeight, "rem")
+  }, getTruncateStyles(maxLines, lineHeight + 'rem'));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 /** @jsx jsx */
 import React, { useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -29,10 +29,20 @@ import { Preview } from '../../../elements';
 var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
   if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
     var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
   }
   if (ignoreContainerPadding) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: calc(var(--container-gap-left) * -1);\n      margin-right: calc(var(--container-gap-right) * -1);\n      &:first-of-type {\n        margin-top: calc(var(--container-padding) * -1);\n      }\n      &:last-of-type {\n        margin-bottom: calc(var(--container-padding) * -1);\n      }\n    "])));
+    return css({
+      marginLeft: 'calc(var(--container-gap-left) * -1)',
+      marginRight: 'calc(var(--container-gap-right) * -1)',
+      '&:first-of-type': {
+        marginTop: 'calc(var(--container-padding) * -1)'
+      },
+      '&:last-of-type': {
+        marginBottom: 'calc(var(--container-padding) * -1)'
+      }
+    });
   }
 };
 
@@ -56,7 +66,7 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     styles = _useState2[0],
     setStyles = _useState2[1];
   var updateStyles = useCallback(function () {
-    setStyles(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+    setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
   }, [ignoreContainerPadding, overrideCss, placement]);
   useEffect(function () {
     updateStyles();

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/index.js

@@ -1,9 +1,7 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject;
 var _excluded = ["testId", "url", "renderers"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
@@ -87,7 +85,9 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
   if (relatedUrls) {
     return /*#__PURE__*/React.createElement(RelatedUrlsResolvedView, _extends({
       renderers: renderers,
-      overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          min-height: 1.55rem;\n        "]))),
+      overrideCss: css({
+        minHeight: '1.55rem'
+      }),
       testId: "".concat(testId, "-resolved-view"),
       relatedUrlsResponse: relatedUrls
     }, blockProps));

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -42,7 +40,9 @@ var RelatedUrlList = function RelatedUrlList(_ref) {
     alignBlock: "center",
     spread: "space-between"
   }, /*#__PURE__*/React.createElement(Text, {
-    overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              font-weight: ", ";\n            "])), "var(--ds-font-weight-medium, 500)"),
+    overrideCss: css({
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }),
     message: {
       descriptor: title
     }

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -12,10 +10,24 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
+var actionStyles = css({
+  cursor: 'pointer',
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
+  return css({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  }, hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    ':focus': {
+      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
+    }
+  });
 };
 
 /**