@atlaskit/smart-card 26.55.1 → 26.56.0

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
+var _styled = require("./styled");
+/** @jsx jsx */
+
+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 = (0, _react2.useRef)();
+  var storageClient = (0, _react2.useMemo)(function () {
+    return new _storageClient.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+  }, []);
+  var discovered = (0, _react2.useMemo)(function () {
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+  }, [storageClient]);
+  (0, _react2.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 = (0, _react2.useMemo)(function () {
+    if (!discovered) {
+      return (0, _react.jsx)("span", {
+        css: (0, _styled.getPulseStyles)(),
+        "data-testid": "".concat(testId, "-discovery")
+      }, children);
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+var _default = exports.default = FeatureDiscovery;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPulseStyles = void 0;
+var _react = require("@emotion/react");
+var getPulseStyles = exports.getPulseStyles = function getPulseStyles() {
+  var color = "var(--ds-border-discovery, #8270DB)";
+  var pulseKeyframes = (0, _react.keyframes)({
+    to: {
+      boxShadow: '0 0 0 7px rgba(0, 0, 0, 0)'
+    }
+  });
+  return (0, _react.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/cjs/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -15,32 +15,39 @@ var _constants = require("../../../../../../constants");
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _aiMotionWrapper = _interopRequireDefault(require("../ai-motion-wrapper"));
 var _aiStateIndicator = _interopRequireDefault(require("../ai-state-indicator"));
 var _utils = require("../../utils");
 var _messages = require("../../../../../../messages");
 var _useAiSummary = require("../../../../../../state/hooks/use-ai-summary");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _linkProvider = require("@atlaskit/link-provider");
 var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
 var _aiSummary = _interopRequireDefault(require("../../../../../common/ai-summary"));
 var _useAnalyticsEvents2 = require("../../../../../../common/analytics/generated/use-analytics-events");
 var _aiEventSummaryViewed = _interopRequireDefault(require("../ai-event-summary-viewed"));
 var _aiEventErrorViewed = _interopRequireDefault(require("../ai-event-error-viewed"));
 var _reactMagneticDi = require("react-magnetic-di");
+var _react2 = require("@emotion/react");
+var _featureDiscovery = _interopRequireDefault(require("../feature-discovery"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var AISummaryBlockErrorIndicator = exports.AISummaryBlockErrorIndicator = function AISummaryBlockErrorIndicator(_ref) {
   var showErrorIndicator = _ref.showErrorIndicator,
     error = _ref.error,
+    showTransition = _ref.showTransition,
     testId = _ref.testId;
-  return showErrorIndicator ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    grow: "fill"
+  return /*#__PURE__*/_react.default.createElement(_aiMotionWrapper.default, {
+    isFadeIn: true,
+    show: showErrorIndicator,
+    showTransition: showTransition
   }, /*#__PURE__*/_react.default.createElement(_aiEventErrorViewed.default, {
     reason: error
   }), /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
     error: error,
-    state: 'error',
+    state: "error",
     testId: testId
-  })) : null;
+  }));
 };
 var AISummaryBlockStatusIndicator = exports.AISummaryBlockStatusIndicator = function AISummaryBlockStatusIndicator(_ref2) {
   var showStatusIndicator = _ref2.showStatusIndicator,
@@ -63,16 +70,20 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
     testId = props.testId,
-    aiSummaryMinHeight = props.aiSummaryMinHeight,
+    _props$aiSummaryMinHe = props.aiSummaryMinHeight,
+    aiSummaryMinHeight = _props$aiSummaryMinHe === void 0 ? 0 : _props$aiSummaryMinHe,
     metadata = props.metadata;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var url = (context === null || context === void 0 ? void 0 : context.url) || '';
   var ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
       url: url,
-      ari: ari
+      ari: ari,
+      product: product
     }),
     summariseUrl = _useAISummary.summariseUrl,
     _useAISummary$state = _useAISummary.state,
@@ -108,7 +119,12 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
           label: "AIIcon"
-        })
+        }),
+        /**
+         * Enabling feature discovery pulse
+         * Cleanup: https://product-fabric.atlassian.net/browse/EDM-9693
+         */
+        wrapper: _featureDiscovery.default
       };
       return [aiAction].concat((0, _toConsumableArray2.default)(actions));
     }
@@ -124,14 +140,25 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
     direction: _constants.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: (0, _react2.css)({
+      overflow: 'visible'
+    }, props.overrideCss)
   }), status === 'done' && /*#__PURE__*/_react.default.createElement(_aiEventSummaryViewed.default, {
     fromCache: isSummarisedOnMountRef.current
-  }), showAISummary && /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
+  }), /*#__PURE__*/_react.default.createElement(_aiMotionWrapper.default, {
+    minHeight: aiSummaryMinHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
     testId: "".concat(testId, "-ai-summary"),
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
@@ -148,6 +175,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     size: size
   }))), /*#__PURE__*/_react.default.createElement(AISummaryBlockErrorIndicator, {
     showErrorIndicator: !isErroredOnMountRef.current && status === 'error',
+    showTransition: !isErroredOnMountRef.current,
     error: error,
     testId: testId
   }));

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

@@ -12,7 +12,9 @@ var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _templateObject;
 /** @jsx jsx */
-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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 

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

@@ -10,30 +10,57 @@ var _react = require("@emotion/react");
 var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _utils2 = require("../../utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject;
 /** @jsx jsx */
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return (0, _react.css)({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
     case _constants.SmartLinkAlignment.Left:
     default:
-      return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return (0, _react.css)({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
   }
 };
 var getGapStyles = function getGapStyles(size, align) {
   var gap = (0, _utils.getGapSize)(size);
   if (align === _constants.SmartLinkAlignment.Right) {
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
+    return (0, _react.css)({
+      '> span': {
+        marginLeft: "".concat(gap, "rem")
+      },
+      '> span:first-child': {
+        marginLeft: 'initial'
+      }
+    });
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+  return (0, _react.css)({
+    '> span': {
+      marginRight: "".concat(gap, "rem"),
+      '&:last-child': {
+        marginRight: 'initial'
+      }
+    }
+  });
 };
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 var getElementGroupStyles = exports.getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+  return (0, _react.css)((0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), {
+    minWidth: '10%'
+  }, width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../../constants");
@@ -16,7 +15,6 @@ var _block = _interopRequireDefault(require("../block"));
 var _elementGroup = _interopRequireDefault(require("../element-group"));
 var _utils2 = require("../../utils");
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
-var _templateObject;
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -26,7 +24,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 = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+  return (0, _react2.css)({
+    lineHeight: "".concat(lineHeight, "rem")
+  }, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -16,7 +16,7 @@ var _constants = require("../../../../../../constants");
 var _block = _interopRequireDefault(require("../../block"));
 var _elements = require("../../../elements");
 var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,10 +38,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
   if (placement === _constants.MediaPlacement.Left || placement === _constants.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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
   }
   if (ignoreContainerPadding) {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react2.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)'
+      }
+    });
   }
 };
 
@@ -65,7 +75,7 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     styles = _useState2[0],
     setStyles = _useState2[1];
   var updateStyles = (0, _react.useCallback)(function () {
-    setStyles((0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+    setStyles((0, _react2.css)(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
   }, [ignoreContainerPadding, overrideCss, placement]);
   (0, _react.useEffect)(function () {
     updateStyles();

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -21,7 +20,6 @@ var _errored = require("./errored");
 var _resolved = require("./resolved");
 var _resolving = require("./resolving");
 var _analytics = require("./analytics");
-var _templateObject;
 var _excluded = ["testId", "url", "renderers"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -97,7 +95,9 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
   if (relatedUrls) {
     return /*#__PURE__*/_react.default.createElement(_resolved.RelatedUrlsResolvedView, (0, _extends2.default)({
       renderers: renderers,
-      overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          min-height: 1.55rem;\n        "]))),
+      overrideCss: (0, _react2.css)({
+        minHeight: '1.55rem'
+      }),
       testId: "".concat(testId, "-resolved-view"),
       relatedUrlsResponse: relatedUrls
     }, blockProps));

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -18,7 +17,6 @@ var _messages = require("../../../../../../../messages");
 var _utils = require("../../../../../components/utils");
 var _text = _interopRequireDefault(require("../../../../elements/text"));
 var _resolvedResultStack = _interopRequireDefault(require("./resolved-result-stack"));
-var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var RelatedUrlList = function RelatedUrlList(_ref) {
@@ -52,7 +50,9 @@ var RelatedUrlList = function RelatedUrlList(_ref) {
     alignBlock: "center",
     spread: "space-between"
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
-    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              font-weight: ", ";\n            "])), "var(--ds-font-weight-medium, 500)"),
+    overrideCss: (0, _react2.css)({
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }),
     message: {
       descriptor: title
     }

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
@@ -17,12 +16,25 @@ var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
-var _templateObject, _templateObject2;
 /** @jsx jsx */
-var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
+var actionStyles = (0, _react2.css)({
+  cursor: 'pointer',
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
+  return (0, _react2.css)({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  }, hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    ':focus': {
+      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
+    }
+  });
 };
 
 /**

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -15,7 +14,6 @@ var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../utils");
-var _templateObject;
 var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title", "metadataPosition", "hideIcon"];
 /**
  * This renders a fully resolved TitleBlock.
@@ -44,7 +42,9 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,
-    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          gap: 0.25rem;\n        "])))
+    overrideCss: (0, _react2.css)({
+      gap: "var(--ds-space-050, 0.25rem)"
+    })
   }, title, subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -79,6 +79,8 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(direction, si
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var highlightRemoveStyles = exports.highlightRemoveStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -5,17 +5,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
+
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
-  var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
+  var animationNameStyles = (0, _react2.keyframes)({
+    '0%': {
+      backgroundPosition: '50% 0'
+    },
+    '100%': {
+      backgroundPosition: '-50% 0'
+    }
+  });
+  var styles = (0, _react2.css)({
+    width: "".concat(width, "rem"),
+    height: "".concat(height, "rem"),
+    borderRadius: '2px',
+    userSelect: 'none',
+    background: "var(--ds-skeleton-subtle, #f6f7f8)",
+    backgroundImage: "linear-gradient( to right, transparent 0%, ".concat("var(--ds-skeleton, #edeef1)", " 20%, transparent 40%, transparent 100% )"),
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '280% 100%',
+    display: 'inline-block',
+    animationDuration: '1s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: animationNameStyles,
+    animationTimingFunction: 'linear'
+  });
+
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
   return (0, _react2.jsx)("span", {
     css: styles,
     "data-testid": testId

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -98,6 +98,8 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 var getContainerStyles = exports.getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -5,13 +5,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
+var styles = (0, _react2.css)({
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  textIndent: '100%',
+  whiteSpace: 'nowrap',
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  'a&.layered-link': {
+    position: 'absolute',
+    zIndex: 0
+  },
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  '&:hover ~ *': {
+    '.actions-button-group': {
+      opacity: 1
+    }
+  }
+});
 
 /**
  * An anchor component to cover the entire container creating a clickable area.

package/dist/cjs/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _react2 = require("@emotion/react");
-var _templateObject;
 /** @jsx jsx */
-var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n"])));
+
+var badgeStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'inline-flex'
+});
 
 /**
  * A base element that displays a visual indicator for a numeric value