@atlaskit/smart-card 26.50.5 → 26.50.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.50.7
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
+## 26.50.6
+
+### Patch Changes
+
+- [#79684](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79684) [`f8ed04300b5c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f8ed04300b5c) - [ux] Updating hardcoded spacing variables in smart-card to use design tokens
+
 ## 26.50.5
 
 ### Patch Changes

package/client/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/client/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/client/index.d.ts"
       ]

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

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.5"
+  packageVersion: "26.50.7"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/components/ActionIcon.js

@@ -15,7 +15,9 @@ var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var spinnerStyles = exports.spinnerStyles = {
   display: 'flex',
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   left: '50%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };

package/dist/cjs/view/BlockCard/components/ActionList.js

@@ -27,13 +27,16 @@ var ActionList = exports.ActionList = function ActionList(_ref) {
   return (0, _react.jsx)("div", {
     css: (0, _utils.mq)({
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [(0, _utils.gs)(2), 0]
     })
   }, (0, _react.jsx)(_buttonGroup.default, null, actionsToShow.map(function (action) {
     return (0, _react.jsx)(_Action.Action, (0, _extends2.default)({
       key: action.id
     }, action));
-  })), actionsToList.length ? (0, _react.jsx)("div", {
+  })), actionsToList.length ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  (0, _react.jsx)("div", {
     css: {
       marginLeft: (0, _utils.gs)(0.5)
     }

package/dist/cjs/view/BlockCard/components/Content.js

@@ -21,6 +21,7 @@ var Content = exports.Content = function Content(_ref) {
     isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
   return (0, _react.jsx)("div", {
     css: (0, _utils.mq)({
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: isCompact ? (0, _utils.gs)(1) : (0, _utils.gs)(2),
       display: 'flex',
       flexDirection: 'column',

package/dist/cjs/view/BlockCard/components/ContentFooter.js

@@ -20,6 +20,7 @@ var ContentFooter = exports.ContentFooter = function ContentFooter(_ref) {
       flexGrow: [1, 'unset'],
       justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
       alignItems: ['unset', 'center'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [(0, _utils.gs)(1), (0, _utils.gs)(1.5)]
     }),
     className: contentFooterClassName

package/dist/cjs/view/BlockCard/components/Frame.js

@@ -71,6 +71,7 @@ var CompactFrame = exports.CompactFrame = function CompactFrame(_ref2) {
       height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
       backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
       width: ['calc(100% - 16px)', '100%'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: ["0px ".concat((0, _utils.gs)(1)), '0']
     })),
     "data-testid": testId,

package/dist/cjs/view/BlockCard/components/Name.js

@@ -26,6 +26,7 @@ var Name = exports.Name = function Name(_ref) {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
       fontWeight: 500,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: isLeftPadded ? (0, _utils.gs)(1) : '0',
       lineHeight: (0, _utils.gs)(2.5),
       // Spec: show max two lines.

package/dist/cjs/view/BlockCard/components/Provider.js

@@ -34,6 +34,7 @@ var Provider = exports.Provider = function Provider(_ref) {
     css: {
       color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
       margin: 0,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: (0, _utils.gs)(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox
       // due to HTML its unwrapping behaviour on paste.

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -10,9 +10,9 @@ var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/docum
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _Frame = require("../components/Frame");
-var _utils = require("../../common/utils");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
+var _utils = require("../../common/utils");
 /** @jsx jsx */
 
 /**
@@ -42,6 +42,7 @@ var ResolvingView = exports.ResolvingView = function ResolvingView(_ref) {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
       color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: (0, _utils.gs)(0.5)
     }
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));

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

@@ -81,11 +81,12 @@ function visible(_ref7) {
 var LinkWrapper = exports.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
 var Wrapper = exports.Wrapper = _styled.default.div(function (props) {
   return wrapperStyles(props);
 }, {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginTop: '10px'
 });
 var embedHeaderHeight = exports.embedHeaderHeight = 32;
@@ -170,10 +171,8 @@ var Byline = exports.Byline = _styled.default.div({
   fontWeight: 'normal',
   lineHeight: 16 / 12
 }, ellipsis('100%'));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var Description = exports.Description = _styled.default.div({
-  marginTop: '7px',
+  marginTop: "calc(".concat("var(--ds-space-100, 8px)", " - 1px)"),
   color: "var(--ds-text, ".concat(colors.N800, ")"),
   fontSize: '12px',
   fontWeight: 'normal',

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -35,7 +35,9 @@ var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErro
   }), (0, _react.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: (0, _utils.gs)(0.5),
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginRight: (0, _utils.gs)(0.5),
       display: '-webkit-box',
       overflow: 'hidden',

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

@@ -1,20 +1,67 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var containerStyles = exports.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)");
+var containerStyles = exports.containerStyles = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex',
+  gap: "var(--ds-space-100, 8px)",
+  justifyContent: 'space-between',
+  // AK ModalBody has 2px padding top and bottom.
+  // Using 14px here to create 16px gap between
+  // link info and iframe
+  padding: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-300, 24px)", " 14px ", "var(--ds-space-300, 24px)")
+});
 var iconSize = '24px';
 // EDM-7328: CSS Specificity
 // An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
 // Specify flex ui icon selector to increase specificity weight to 0-2-1.
-var iconCss = exports.iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &,\n  [data-smart-element-icon] img,\n  [data-smart-element-icon] span,\n  [data-smart-element-icon] svg,\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);
+var iconCss = exports.iconCss = (0, _react.css)({
+  '&, [data-smart-element-icon] img, [data-smart-element-icon] span, [data-smart-element-icon] svg, img, span, svg': {
+    height: iconSize,
+    minHeight: iconSize,
+    maxHeight: iconSize,
+    width: iconSize,
+    minWidth: iconSize,
+    maxWidth: iconSize
+  }
+});
 var height = '20px';
-var titleCss = exports.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);
-var actionCss = exports.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);
+var titleCss = exports.titleCss = (0, _react.css)({
+  flex: '1 1 auto',
+  h3: {
+    flex: '1 1 auto',
+    fontSize: '16px',
+    fontWeight: 400,
+    lineHeight: height,
+    display: '-webkit-box',
+    marginBottom: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: 'vertical',
+    '@supports not (-webkit-line-clamp: 1)': {
+      maxHeight: height
+    }
+  }
+});
+var actionCss = exports.actionCss = (0, _react.css)({
+  display: 'flex',
+  flex: '0 0 auto',
+  gap: "var(--ds-space-050, 4px)",
+  lineHeight: height,
+  span: {
+    lineHeight: height
+  },
+  '@media only screen and (max-width: 980px)': {
+    // Hide resize button if the screen is smaller than the min width
+    // or too small to have enough impact to matter.
+    '.smart-link-resize-button': {
+      display: 'none'
+    }
+  }
+});

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _colors = require("@atlaskit/theme/colors");
+var _logo = require("@atlaskit/logo");
 var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
 var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
 var _constants = require("../../../../../constants");
@@ -311,25 +312,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var ImportedIcon = importIcon(importFn);
   switch (icon) {
     case _constants.IconType.Confluence:
-      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
-        testId: testId,
-        textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
-        iconColor: _colors.B200,
-        iconGradientStart: _colors.B400,
-        iconGradientStop: _colors.B200
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      return /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
+        appearance: "brand",
+        testId: testId
       });
     case _constants.IconType.Jira:
-      // Logo component has a different prop set from other icon components
-      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
-        testId: testId,
-        textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */,
-        iconColor: _colors.B200,
-        iconGradientStart: _colors.B400,
-        iconGradientStop: _colors.B200
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+      return /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
+        appearance: "brand",
+        testId: testId
       });
     case _constants.IconType.Error:
     case _constants.IconType.Forbidden:

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

@@ -1,21 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textStyles = exports.linkStyles = exports.dropdownItemGroupStyles = exports.contentStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../../../../utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
-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 = exports.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
-var linkStyles = exports.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)");
+var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)({
+  button: {
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit',
+      cursor: 'default'
+    }
+  }
+});
+var sharedBlockStyles = (0, _react.css)({
+  display: 'flex',
+  gap: '0.5rem',
+  lineHeight: '1rem',
+  minWidth: 0,
+  overflow: 'hidden',
+  flexDirection: 'row',
+  alignItems: 'center'
+});
+var contentStyles = exports.contentStyles = (0, _react.css)(sharedBlockStyles, {
+  marginTop: "var(--ds-space-025, 2px)",
+  alignItems: 'flex-start',
+  '> span, > div': {
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    color: "var(--ds-text, ".concat(_colors.N800, ")")
+  }
+});
+var linkStyles = exports.linkStyles = (0, _react.css)(sharedBlockStyles, {
+  cursor: 'pointer',
+  fontSize: '0.875rem',
+  marginTop: "var(--ds-space-100, 8px)",
+  marginLeft: "var(--ds-space-400, 32px)",
+  marginBottom: "var(--ds-space-025, 2px)"
+});
 var textStyles = exports.textStyles = function textStyles(maxLines) {
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), (0, _utils.getTruncateStyles)(maxLines));
+  return (0, _react.css)({
+    lineHeight: '1rem',
+    whiteSpace: 'normal'
+  }, (0, _utils.getTruncateStyles)(maxLines));
 };

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

@@ -5,27 +5,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var _react = _interopRequireDefault(require("react"));
-var _templateObject, _templateObject2;
 // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // 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 = exports.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)");
+var Icon = exports.Icon = _styled.default.img({
+  height: '14px',
+  width: '14px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
 
 // 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.
-var AKIconWrapper = exports.AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
+var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
 var Shimmer = exports.Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.5",
+  packageVersion: "26.50.7",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Byline.js

@@ -20,6 +20,7 @@ var Byline = exports.Byline = function Byline(_ref) {
       lineHeight: (0, _utils.gs)(2.5),
       color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
       fontWeight: 'normal',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: (0, _utils.gs)(0.5),
       // Spec: only allow two lines MAX to be shown.
       display: '-webkit-box',

package/dist/cjs/view/common/MetadataList.js

@@ -18,6 +18,7 @@ var MetadataList = exports.MetadataList = function MetadataList(_ref) {
   return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: (0, _utils.gs)(0.5),
       alignItems: 'center',
       '&:last-child': {

package/dist/cjs/view/common/ai-prism/ai-glowing-border/animated-svg-container.js

@@ -18,11 +18,11 @@ var svgStyles = (0, _react.css)({
   borderRadius: _constants.OUTER_BORDER_RADIUS
 });
 var blurredStyles = (0, _react.css)({
-  width: "calc(100% - ".concat(_constants.GLOW_SIZE / 2, "px)"),
-  height: "calc(100% - ".concat(_constants.GLOW_SIZE / 2, "px)"),
-  top: _constants.GLOW_SIZE / 2,
-  left: _constants.GLOW_SIZE / 2,
-  filter: "blur(".concat(_constants.GLOW_SIZE, "px)"),
+  width: "calc(100% - ".concat("var(--ds-space-050, 4px)", ")"),
+  height: "calc(100% - ".concat("var(--ds-space-050, 4px)", ")"),
+  top: "var(--ds-space-050, 4px)",
+  left: "var(--ds-space-050, 4px)",
+  filter: "blur(".concat("var(--ds-space-100, 8px)", ")"),
   // for safari... : https://stackoverflow.com/a/71353198
   backfaceVisibility: 'hidden',
   transform: 'translate3d(0, 0, 0)'

package/dist/cjs/view/common/ai-prism/constants.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.aiThemeTokens = exports.OUTER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = exports.GLOW_SIZE = exports.AI_BORDER_PALETTE = void 0;
+exports.aiThemeTokens = exports.OUTER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = exports.AI_BORDER_PALETTE = void 0;
 /**
  * The bulk of this file is originally from
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications.
  */
 
-var GLOW_SIZE = exports.GLOW_SIZE = 8;
 var INNER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = 8;
 var OUTER_BORDER_RADIUS = exports.OUTER_BORDER_RADIUS = 10;
 

package/dist/cjs/view/common/utils.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mq = exports.gs = exports.br = void 0;
 var _facepaint = _interopRequireDefault(require("facepaint"));
+// this function is used for spacing, fontsize and line height,
+// once design tokens have been established for the all of these categories
+// then this function can be replaced with the tokens
 var gs = exports.gs = function gs(times) {
   return "".concat(8 * times, "px");
 };

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

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.5"
+  packageVersion: "26.50.7"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/components/ActionIcon.js

@@ -8,7 +8,9 @@ import CrossIcon from '@atlaskit/icon/glyph/cross';
 export const spinnerStyles = {
   display: 'flex',
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   left: '50%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   top: '50%',
   transform: 'translate(-50%, -50%)'
 };

package/dist/es2019/view/BlockCard/components/ActionList.js

@@ -16,11 +16,14 @@ export const ActionList = ({
   return jsx("div", {
     css: mq({
       display: 'flex',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: [gs(2), 0]
     })
   }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
     key: action.id
-  }, action)))), actionsToList.length ? jsx("div", {
+  }, action)))), actionsToList.length ?
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  jsx("div", {
     css: {
       marginLeft: gs(0.5)
     }

package/dist/es2019/view/BlockCard/components/Content.js

@@ -13,6 +13,7 @@ export const Content = ({
   isCompact = false
 }) => jsx("div", {
   css: mq({
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     padding: isCompact ? gs(1) : gs(2),
     display: 'flex',
     flexDirection: 'column',

package/dist/es2019/view/BlockCard/components/ContentFooter.js

@@ -12,6 +12,7 @@ export const ContentFooter = ({
     flexGrow: [1, 'unset'],
     justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
     alignItems: ['unset', 'center'],
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginTop: [gs(1), gs(1.5)]
   }),
   className: contentFooterClassName

package/dist/es2019/view/BlockCard/components/Frame.js

@@ -63,6 +63,7 @@ export const CompactFrame = ({
       height: inheritDimensions ? '100%' : gs(5),
       backgroundColor: `var(--ds-background-neutral, ${N20A})`,
       width: ['calc(100% - 16px)', '100%'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       padding: [`0px ${gs(1)}`, '0']
     }),
     "data-testid": testId,

package/dist/es2019/view/BlockCard/components/Name.js

@@ -18,6 +18,7 @@ export const Name = ({
   css: {
     fontSize: `${fontSize()}px`,
     fontWeight: 500,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginLeft: isLeftPadded ? gs(1) : '0',
     lineHeight: gs(2.5),
     // Spec: show max two lines.

package/dist/es2019/view/BlockCard/components/Provider.js

@@ -28,6 +28,7 @@ export const Provider = ({
     css: {
       color: `var(--ds-text-subtlest, ${N300})`,
       margin: 0,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: gs(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox
       // due to HTML its unwrapping behaviour on paste.

package/dist/es2019/view/BlockCard/views/ResolvingView.js

@@ -4,9 +4,9 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { Frame } from '../components/Frame';
-import { gs } from '../../common/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
+import { gs } from '../../common/utils';
 /**
  * Class name for selecting non-flexible resolving block card
  *
@@ -32,6 +32,7 @@ export const ResolvingView = ({
   css: {
     fontSize: `${fontSize()}px`,
     color: `var(--ds-text-subtlest, ${N90})`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginLeft: gs(0.5)
   }
 }, jsx(FormattedMessage, messages.loading)));

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

@@ -143,9 +143,10 @@ export const LinkWrapper = styled.div`
     text-decoration: none;
   }
 `;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Wrapper = styled.div(props => wrapperStyles(props), {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   marginTop: '10px'
 });
 export const embedHeaderHeight = 32;
@@ -268,10 +269,8 @@ export const Byline = styled.div({
   fontWeight: 'normal',
   lineHeight: 16 / 12
 }, ellipsis('100%'));
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Description = styled.div({
-  marginTop: '7px',
+  marginTop: `calc(${"var(--ds-space-100, 8px)"} - 1px)`,
   color: `var(--ds-text, ${colors.N800})`,
   fontSize: '12px',
   fontWeight: 'normal',

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -25,7 +25,9 @@ export const EmbedCardErroredView = ({
 }), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginLeft: gs(0.5),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     marginRight: gs(0.5),
     display: '-webkit-box',
     overflow: 'hidden',