@atlaskit/smart-card 26.3.2 → 26.3.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.3.4
+
+### Patch Changes
+
+- [`d86bc75af82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d86bc75af82) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
+## 26.3.3
+
+### Patch Changes
+
+- [`6d9a4d28d94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d9a4d28d94) - Fixes HoverCard component providing hover card analytics context to the wrapped trigger component.
+- Updated dependencies
+
 ## 26.3.2
 
 ### Patch Changes

package/dist/cjs/utils/analytics/SmartLinkAnalyticsContext.js

@@ -21,7 +21,8 @@ var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
   var children = _ref.children,
     url = _ref.url,
     appearance = _ref.appearance,
-    id = _ref.id;
+    id = _ref.id,
+    source = _ref.source;
   var _useSmartLinkState = (0, _store.useSmartCardState)(url),
     details = _useSmartLinkState.details,
     status = _useSmartLinkState.status;
@@ -36,6 +37,7 @@ var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref) {
   var display = isFlexibleUi ? _constants.CardDisplay.Flexible : appearance;
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: {
+      source: source,
       attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
         urlHash: urlHash,
         display: display,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.2",
+	"version": "26.3.4",
 	"sideEffects": false
 }

package/dist/cjs/view/BlockCard/index.js

@@ -86,7 +86,7 @@ var _linkProvider = require("@atlaskit/link-provider");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
 var _templateObject;
 /** @jsx jsx */
-var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -73,6 +73,8 @@ function visible(_ref6) {
 var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.LinkWrapper = LinkWrapper;
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
@@ -125,24 +127,26 @@ var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _tag
 exports.Image = Image;
 var maxAvatarCount = 6;
 exports.maxAvatarCount = maxAvatarCount;
-var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 exports.ContentWrapper = ContentWrapper;
 var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
 exports.Title = Title;
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.Byline = Byline;
 var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 exports.Description = Description;
-var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
+var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
   var src = _ref13.src;
   return src;
 });
 exports.Thumbnail = Thumbnail;
-var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
+var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.UsersWrapper = UsersWrapper;
-var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  text-align: right;\n\n  > * {\n    margin-top: ", ";\n  }\n\n  > * + * {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 exports.ActionsWrapper = ActionsWrapper;
 var AlertWrapper = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
 exports.AlertWrapper = AlertWrapper;

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -8,7 +8,8 @@ exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.containerStyles = containerStyles;
 var iconSize = '24px';
 var iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
@@ -16,5 +17,5 @@ exports.iconCss = iconCss;
 var height = '20px';
 var titleCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
 exports.titleCss = titleCss;
-var actionCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+var actionCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);
 exports.actionCss = actionCss;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -14,6 +14,8 @@ var dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObjec
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.contentStyles = contentStyles;
 var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 exports.linkStyles = linkStyles;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -8,9 +8,11 @@ exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownIte
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
-var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.triggerButtonStyles = triggerButtonStyles;
-var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
+var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 exports.triggerLozengeStyles = triggerLozengeStyles;
-var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
+var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;

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

@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var getGap = function getGap(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HoverCardComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
@@ -21,8 +22,9 @@ var _constants = require("../../../constants");
 var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsx jsx */
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
     url = _ref.url,
@@ -63,18 +65,24 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [isOpen]);
   var hideCard = (0, _react2.useCallback)(function () {
-    //Check its previously open to avoid firing events when moving between the child and hover card components
-    if (isOpen === true && cardOpenTime.current) {
-      var hoverTime = Date.now() - cardOpenTime.current;
-      analytics.ui.hoverCardDismissedEvent({
-        previewDisplay: 'card',
-        hoverTime: hoverTime,
-        previewInvokeMethod: 'mouse_hover',
-        status: linkStatus
-      });
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+      /**
+       * Defer to inner HoverCardContent to fire this event
+       */
+    } else {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        var hoverTime = Date.now() - cardOpenTime.current;
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.hoverCardDismissedEvent({
+          previewDisplay: 'card',
+          hoverTime: hoverTime,
+          previewInvokeMethod: 'mouse_hover',
+          status: linkStatus
+        });
+      }
     }
     setIsOpen(false);
-  }, [analytics.ui, isOpen, linkStatus]);
+  }, [analytics, isOpen, linkStatus]);
   var initHideCard = (0, _react2.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -90,14 +98,20 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
     fadeInTimeoutId.current = setTimeout(function () {
-      //Check if its previously closed to avoid firing events when moving between the child and hover card components
-      if (isOpen === false) {
-        cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent({
-          previewDisplay: hoverDisplay,
-          previewInvokeMethod: invokeMethod,
-          status: linkStatus
-        });
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+        /**
+         * Defer to inner HoverCardContent to fire this event
+         */
+      } else {
+        //Check if its previously closed to avoid firing events when moving between the child and hover card components
+        if (isOpen === false) {
+          cardOpenTime.current = Date.now();
+          analytics === null || analytics === void 0 ? void 0 : analytics.ui.hoverCardViewedEvent({
+            previewDisplay: hoverDisplay,
+            previewInvokeMethod: invokeMethod,
+            status: linkStatus
+          });
+        }
       }
       //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
       if (parentSpan.current && mousePos.current) {
@@ -108,12 +122,12 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
+  }, [isOpen, setMousePosition, analytics, linkStatus]);
   var linkActions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: _constants.CardDisplay.HoverCardPreview,
     analyticsHandler: analyticsHandler,
-    origin: 'smartLinkPreviewHoverCard'
+    origin: HOVER_CARD_SOURCE
   });
   var filteredActions = (0, _react2.useMemo)(function () {
     return hidePreviewButton ? linkActions.filter(function (action) {
@@ -136,14 +150,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   }, [closeOnChildClick, hideCard]);
   var content = (0, _react2.useCallback)(function (_ref2) {
     var update = _ref2.update;
-    return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
-      url: url,
-      appearance: _constants.CardDisplay.HoverCardPreview,
-      id: id
-    }, (0, _react.jsx)(_HoverCardContent.default, {
+    var hoverCardContentProps = _objectSpread({
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      analytics: analytics,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,
@@ -152,18 +161,15 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       showServerActions: showServerActions,
       url: url,
       id: id
-    })) : (0, _react.jsx)(_HoverCardContent.default, {
-      onMouseEnter: initShowCard,
-      onMouseLeave: initHideCard,
-      analytics: analytics,
-      cardActions: filteredActions,
-      cardState: linkState,
-      onActionClick: onActionClick,
-      onResolve: update,
-      renderers: renderers,
-      showServerActions: showServerActions,
-      url: url
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? {} : {
+      analytics: analytics
     });
+    return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-analytics-context') ? (0, _react.jsx)(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+      url: url,
+      appearance: _constants.CardDisplay.HoverCardPreview,
+      id: id,
+      source: HOVER_CARD_SOURCE
+    }, (0, _react.jsx)(_HoverCardContent.default, hoverCardContentProps)) : (0, _react.jsx)(_HoverCardContent.default, hoverCardContentProps);
   }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -9,12 +9,14 @@ exports.hoverCardClassName = exports.getOpenAction = exports.getCopyAction = exp
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@emotion/react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
-var _analyticsNext = require("@atlaskit/analytics-next");
 var _react2 = _interopRequireWildcard(require("react"));
 var _constants = require("../../../constants");
 var _extractMetadata2 = require("../../../extractors/hover/extractMetadata");
+var _analytics2 = require("../../../state/analytics");
 var _helpers = require("../../../state/helpers");
 var _utils = require("../../../utils");
 var _styled = require("../styled");
@@ -26,6 +28,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
 var _actions = require("../../../state/actions");
 var _click = require("../../../utils/analytics/click");
+var _store = require("../../../state/store");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -91,7 +94,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? '' : _ref$id,
-    analytics = _ref.analytics,
+    _analytics = _ref.analytics,
     _ref$cardActions = _ref.cardActions,
     cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
     cardState = _ref.cardState,
@@ -104,13 +107,52 @@ var HoverCardContent = function HoverCardContent(_ref) {
     showServerActions = _ref.showServerActions;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var defaultAnalytics = (0, _analytics2.useSmartLinkAnalytics)(url, undefined, id);
+  var analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
   var extensionKey = (0, _react2.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(cardState.details);
   }, [cardState.details]);
   var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
+  var linkState = (0, _store.useSmartCardState)(url);
+  var linkStatus = linkState.status;
+  var statusRef = (0, _react2.useRef)(linkStatus);
+  var analyticsRef = (0, _react2.useRef)(analytics);
   (0, _react2.useEffect)(function () {
     actions.loadMetadata();
   }, [actions]);
+  (0, _react2.useEffect)(function () {
+    /**
+     * Must access current analytics object value via ref because its not stable
+     * and it can trigger useEffect to re-run below
+     */
+    if (analyticsRef.current !== analytics) {
+      analyticsRef.current = analytics;
+    }
+    if (statusRef.current !== linkStatus) {
+      statusRef.current = linkStatus;
+    }
+  }, [analytics, linkStatus]);
+  (0, _react2.useEffect)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+      var previewDisplay = 'card';
+      var previewInvokeMethod = 'mouse_hover';
+      var cardOpenTime = Date.now();
+      analyticsRef.current.ui.hoverCardViewedEvent({
+        previewDisplay: previewDisplay,
+        previewInvokeMethod: previewInvokeMethod,
+        status: statusRef.current
+      });
+      return function () {
+        var hoverTime = Date.now() - cardOpenTime;
+        analyticsRef.current.ui.hoverCardDismissedEvent({
+          previewDisplay: previewDisplay,
+          previewInvokeMethod: previewInvokeMethod,
+          hoverTime: hoverTime,
+          status: statusRef.current
+        });
+      };
+    }
+  }, []);
   var onClick = (0, _react2.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({

package/dist/cjs/view/HoverCard/index.js

@@ -10,6 +10,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../state/analytics");
 var _analytics2 = require("../../utils/analytics");
 var _HoverCardComponent = require("./components/HoverCardComponent");
@@ -24,7 +25,11 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   var analyticsHandler = (0, _react2.useCallback)(function (analyticsPayload) {
     (0, _analytics2.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
-  var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
+
+  /**
+   * Feature flag disables prop drilling of analytics handlers
+   */
+  var analytics = (0, _analytics.useSmartLinkAnalytics)(url, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? undefined : analyticsHandler, id);
   var onError = (0, _react2.useCallback)(function (error, info) {
     analytics.ui.renderFailedEvent({
       display: _constants.CardDisplay.HoverCardPreview,
@@ -33,18 +38,30 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
       errorInfo: info
     });
   }, [analytics.ui, id]);
+
+  /**
+   * Feature flag disables the prop drilling of analytics handlers to hover card component
+   */
+  var analyticsProps = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? {} : {
+    analyticsHandler: analyticsHandler,
+    analytics: analytics
+  };
   return (0, _react.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
-    analyticsHandler: analyticsHandler,
-    analytics: analytics
-  }), children));
+  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, analyticsProps), children));
 };
-var HoverCard = (0, _analyticsNext.withAnalyticsContext)({
+var HoverCardWithAnalyticsContext = (0, _analyticsNext.withAnalyticsContext)({
   source: 'smartLinkPreviewHoverCard',
   attributes: {
     display: _constants.CardDisplay.HoverCardPreview
   }
 })((0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary));
+var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary);
+var HoverCard = function HoverCard(props) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+    return (0, _react.jsx)(HoverCardWithoutAnalyticsContext, props);
+  }
+  return (0, _react.jsx)(HoverCardWithAnalyticsContext, props);
+};
 exports.HoverCard = HoverCard;

package/dist/cjs/view/InlineCard/Icon.js

@@ -15,13 +15,13 @@ var _templateObject, _templateObject2;
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
 exports.AKIconWrapper = AKIconWrapper;
 var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -25,7 +25,7 @@ var IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0,
 
 // Wraps all emoji in Inline Links similar to icon
 exports.IconWrapper = IconWrapper;
-var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
@@ -38,15 +38,15 @@ exports.IconTitleWrapper = IconTitleWrapper;
 var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n"])));
 // TODO: Replace overrides with proper AtlasKit solution.
 exports.LozengeWrapper = LozengeWrapper;
-var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
+var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
 exports.LozengeBlockWrapper = LozengeBlockWrapper;
-var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 exports.RightIconPositionWrapper = RightIconPositionWrapper;
-var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
 exports.IconPositionWrapper = IconPositionWrapper;
 var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 

package/dist/cjs/view/InlineCard/ResolvingView/styled.js

@@ -9,5 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
 var _templateObject;
-var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-top;\n  margin-left: 2px;\n"])));
+var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-top;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");
 exports.SpinnerWrapper = SpinnerWrapper;

package/dist/es2019/utils/analytics/SmartLinkAnalyticsContext.js

@@ -8,7 +8,8 @@ export const SmartLinkAnalyticsContext = ({
   children,
   url,
   appearance,
-  id
+  id,
+  source
 }) => {
   const {
     details,
@@ -24,6 +25,7 @@ export const SmartLinkAnalyticsContext = ({
   const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
+      source,
       attributes: {
         ...resolvedAttributes,
         urlHash,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.2",
+	"version": "26.3.4",
 	"sideEffects": false
 }

package/dist/es2019/view/BlockCard/index.js

@@ -28,7 +28,7 @@ export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResol
 const flexibleBlockCardElevationStyle = css`
   border-radius: 1.5px;
   box-shadow: ${tokens.elevation};
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 `;
 export const BlockCard = ({
   id,

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -127,6 +127,8 @@ export const LinkWrapper = styled.div`
     text-decoration: none;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const Wrapper = styled.div`
   ${props => wrapperStyles(props)};
   margin-top: 10px;
@@ -239,7 +241,8 @@ export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
-  padding: 8px 12px 12px 12px;
+  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}
+    ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"};
 `;
 export const Title = styled.div`
   color: ${`var(--ds-text, ${colors.N900})`};
@@ -250,13 +253,15 @@ export const Title = styled.div`
   overflow: hidden;
 `;
 export const Byline = styled.div`
-  margin-top: 4px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
   color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: 12px;
   font-weight: normal;
   line-height: ${16 / 12};
   ${ellipsis('100%')};
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const Description = styled.div`
   margin-top: 7px;
   color: ${`var(--ds-text, ${colors.N800})`};
@@ -267,13 +272,14 @@ export const Description = styled.div`
   overflow: hidden;
 `;
 export const ResolvedViewIconWrapper = styled.div`
-  margin-top: 4px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
 `;
 export const Thumbnail = styled.div`
   ${borderRadius}
   ${csssize(48)}
   float: right;
-  margin: 4px 0 12px 12px;
+  margin: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"}
+    ${"var(--ds-space-150, 12px)"};
   background-color: ${`var(--ds-skeleton, ${colors.N30})`};
   background-image: url(${({
   src
@@ -281,18 +287,18 @@ export const Thumbnail = styled.div`
   background-size: cover;
 `;
 export const UsersWrapper = styled.div`
-  margin-top: 8px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
 `;
 export const ActionsWrapper = styled.div`
-  margin-top: 8px;
+  margin-top: ${"var(--ds-space-100, 8px)"};
   text-align: right;
 
   > * {
-    margin-top: 4px;
+    margin-top: ${"var(--ds-space-050, 4px)"};
   }
 
   > * + * {
-    margin-left: 4px;
+    margin-left: ${"var(--ds-space-050, 4px)"};
   }
 `;
 export const AlertWrapper = styled.div`