@atlaskit/smart-card 18.0.13 → 18.0.16

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

@@ -15,27 +15,27 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
-
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _styled2 = require("../IconAndTitleLayout/styled");
 
 var _templateObject;
 
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(_colors.B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat((0, _tokens.token)('color.border.selected', _colors.B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
     return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat((0, _components.themed)({
-      light: _colors.N20,
-      dark: BACKGROUND_COLOR_DARK
+      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20),
+      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
-      light: _colors.B50,
-      dark: BACKGROUND_COLOR_DARK
+      light: (0, _tokens.token)('color.background.selected', _colors.B50),
+      dark: (0, _tokens.token)('color.background.selected', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
   } else {
     return '';
@@ -70,18 +70,21 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
   return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
 }, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: _colors.B400,
-  dark: '#4794FF'
+  light: (0, _tokens.token)('color.link', _colors.B400),
+  dark: (0, _tokens.token)('color.link', '#4794FF')
 }), function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({
-    light: 'white',
-    dark: BACKGROUND_COLOR_DARK
+    light: (0, _tokens.token)('elevation.surface.raised', 'white'),
+    dark: (0, _tokens.token)('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
   });
 }, function (props) {
-  return props.withoutBackground ? '' : (0, _elevation.e100)();
+  return props.withoutBackground ? '' : (0, _components.themed)({
+    light: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A)), ";"),
+    dark: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A)), ";")
+  });
 }, function (props) {
   return isInteractive(props);
 }, function (props) {

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

@@ -13,6 +13,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _core = require("@emotion/core");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
@@ -32,6 +34,6 @@ var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 =
 
 exports.AKIconWrapper = AKIconWrapper;
 
-var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (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\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\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"])), placeholderShimmer);
+var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (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  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\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"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
 
 exports.Shimmer = Shimmer;

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -27,6 +27,8 @@ var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-fill
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -48,7 +50,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FallbackUnauthorizedIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
   label: "error",
   size: "small",
-  primaryColor: _colors.R400
+  primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
 }));
 
 var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
@@ -108,7 +110,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
         title: this.renderMessage(),
-        titleColor: _colors.N500
+        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
     }
   }]);

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

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
@@ -25,8 +27,8 @@ var IconStyledButton = _styled.default.span(_templateObject || (_templateObject
 exports.IconStyledButton = IconStyledButton;
 
 var NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: _colors.N200,
-  dark: LINK_COLOR_DARK
+  light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
+  dark: (0, _tokens.token)('color.text.subtlest', LINK_COLOR_DARK)
 }));
 
 exports.NoLinkAppearance = NoLinkAppearance;
@@ -36,8 +38,8 @@ var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObj
 exports.LowercaseAppearance = LowercaseAppearance;
 
 var LinkAppearance = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: _colors.B400,
-  dark: LINK_COLOR_DARK
+  light: (0, _tokens.token)('color.link', _colors.B400),
+  dark: (0, _tokens.token)('color.link', LINK_COLOR_DARK)
 }));
 
 exports.LinkAppearance = LinkAppearance;

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

@@ -9,6 +9,8 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("./utils");
 
 /** @jsx jsx */
@@ -21,7 +23,7 @@ var Byline = function Byline(_ref) {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
       lineHeight: (0, _utils.gs)(2.5),
-      color: "".concat(_colors.N300),
+      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
       fontWeight: 'normal',
       marginTop: (0, _utils.gs)(0.5),
       // Spec: only allow two lines MAX to be shown.

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

@@ -15,6 +15,8 @@ var _utils = require("./utils");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 /** @jsx jsx */
 var Metadata = function Metadata(_ref) {
   var text = _ref.text,
@@ -42,7 +44,7 @@ var Metadata = function Metadata(_ref) {
   }, metadataIcon, (0, _core.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
-      color: "".concat(_colors.N300),
+      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
       marginRight: (0, _utils.gs)(0.5),
       marginLeft: '2px'
     }

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

@@ -21,6 +21,8 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _utils = require("./utils");
@@ -64,7 +66,7 @@ var Header = function Header(_ref) {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'baseline',
-      borderBottom: "1px solid ".concat(_colors.N30A)
+      borderBottom: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N30A))
     }
   }, (0, _core.jsx)("div", {
     css: {
@@ -81,7 +83,7 @@ var Header = function Header(_ref) {
     }
   }, (0, _core.jsx)("h3", null, title), (0, _core.jsx)("div", {
     css: {
-      color: _colors.N100
+      color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
     }
   }, metadata.items.length && (0, _core.jsx)(_MetadataList.MetadataList, {
     items: metadata.items

package/dist/es2019/extractors/common/context/extractProvider.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { N700, B200, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { extractUrlFromIconJsonLd } from '../utils';
@@ -33,18 +34,26 @@ const extractProviderIcon = (icon, id) => {
   if (id) {
     if (id === CONFLUENCE_GENERATOR_ID) {
       return /*#__PURE__*/React.createElement(ConfluenceIcon, {
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
-        iconGradientStop: B200,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     } else if (id === JIRA_GENERATOR_ID) {
       return /*#__PURE__*/React.createElement(JiraIcon, {
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
-        iconGradientStop: B200,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     }

package/dist/es2019/extractors/common/detail/extractCommentCount.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ChatIcon from '@atlaskit/icon/glyph/comment';
 export const extractCommentCount = jsonLd => {
   const commentCount = jsonLd['schema:commentCount'];
@@ -11,7 +12,7 @@ export const extractCommentCount = jsonLd => {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/extractors/common/detail/extractProgrammingLanguage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
 import CodeIcon from '@atlaskit/icon/glyph/code';
+import { token } from '@atlaskit/tokens';
 export const extractProgrammingLanguage = jsonLd => {
   const programmingLanguage = jsonLd['schema:programmingLanguage'];
 
@@ -10,7 +11,7 @@ export const extractProgrammingLanguage = jsonLd => {
       icon: /*#__PURE__*/React.createElement(CodeIcon, {
         size: "small",
         label: "code",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/extractors/common/detail/extractSubscriberCount.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
+import { token } from '@atlaskit/tokens';
 export const extractSubscriberCount = jsonLd => {
   const subscriberCount = jsonLd['atlassian:subscriberCount'];
 
@@ -10,7 +11,7 @@ export const extractSubscriberCount = jsonLd => {
       icon: /*#__PURE__*/React.createElement(PeopleIcon, {
         size: "small",
         label: "subscribers",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/extractors/common/primitives/extractTitleTextColor.js

@@ -1,5 +1,6 @@
 import { extractorPriorityMap } from '../icon/priority';
 import { R500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const extractTitleTextColor = jsonLd => {
   const type = jsonLd['@type'];
 
@@ -8,7 +9,7 @@ export const extractTitleTextColor = jsonLd => {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return R500;
+        return token('color.text.danger', R500);
 
       default:
         return undefined;

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -1,4 +1,4 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export const useSmartLinkAnalytics = dispatchAnalytics => {
@@ -15,6 +15,9 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
       });
       dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
     },
+    hoverCardOpenLinkClickedEvent: (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => {
+      dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+    },
     closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
     renderSuccessEvent: (display, id, definitionId, extensionKey) => {
       succeedUfoExperience('smart-link-rendered', id, {
@@ -26,7 +29,9 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
         display
       });
       dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
-    }
+    },
+    hoverCardViewedEvent: (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod)),
+    hoverCardDismissedEvent: (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
   }), [dispatchAnalytics]);
   const operational = useMemo(() => ({
     resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),

package/dist/es2019/state/flexible-ui-context/index.js

@@ -1,3 +1,8 @@
 import { useContext, createContext } from 'react';
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export const useFlexibleUiContext = () => useContext(FlexibleUiContext);

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

@@ -227,4 +227,39 @@ export const uiRenderFailedEvent = (display, error, errorInfo) => ({
     errorInfo,
     display
   }
+});
+export const uiHoverCardViewedEvent = (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'viewed',
+  actionSubject: 'hoverCard',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    hoverDisplay,
+    previewInvokeMethod
+  }
+});
+export const uiHoverCardDismissedEvent = (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'dismissed',
+  actionSubject: 'hoverCard',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    hoverTime,
+    hoverDisplay,
+    previewInvokeMethod
+  }
+});
+export const uiHoverCardOpenLinkClickedEvent = (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => ({
+  action: 'clicked',
+  actionSubject: 'button',
+  actionSubjectId: 'shortcutGoToLink',
+  eventType: 'ui',
+  attributes: { ...context,
+    definitionId: definitionId || '',
+    extensionKey: extensionKey || '',
+    previewDisplay,
+    previewInvokeMethod
+  }
 });

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

@@ -1,6 +1,6 @@
 import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent } from './analytics';
 export const instrumentEvent = (id, status, definitionId, extensionKey, resourceType, error) => {
   const measure = getMeasure(id, status) || {
     duration: undefined

package/dist/es2019/version.json

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

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs, br, mq } from '../../common/utils';
 export const Frame = (props = {
   isSelected: false,
@@ -12,7 +13,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: 'white'
+  backgroundColor: token('elevation.surface', 'white')
 };
 export const ExpandedFrame = ({
   children,
@@ -25,15 +26,16 @@ export const ExpandedFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: N20A,
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: token('color.background.neutral.subtle.hovered', N20A),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
       borderRadius: isSelected ? br() : br(0.5),
-      border: `2px solid ${isSelected ? B200 : 'transparent'}`,
+      border: `2px solid ${isSelected ? token('color.border.selected', B200) : 'transparent'}`,
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A};`
+      boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)
     }),
     "data-testid": testId,
     className: className,
@@ -51,14 +53,14 @@ export const CompactFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: N30A
+        backgroundColor: token('color.background.neutral.hovered', N30A)
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${B200}` : '',
+      border: isSelected ? `2px solid ${token('color.border.selected', B200)}` : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: N20A,
+      backgroundColor: token('color.background.neutral', N20A),
       width: ['calc(100% - 16px)', '100%'],
       padding: [`0px ${gs(1)}`, '0']
     }),

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const Link = ({
   url,
   testId = 'block-card',
@@ -10,7 +11,7 @@ export const Link = ({
     "data-testid": `${testId}-link`,
     className: className,
     css: {
-      color: B400,
+      color: token('color.link', B400),
       wordBreak: 'break-all'
     }
   }, url);

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
+import { token } from '@atlaskit/tokens';
 export const Provider = ({
   name,
   icon
@@ -27,7 +28,7 @@ export const Provider = ({
   }, iconToRender, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: N300,
+      color: token('color.text.subtlest', N300),
       margin: 0,
       marginLeft: gs(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox

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

@@ -15,6 +15,7 @@ import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { RetryAction } from '../actions/RetryAction';
+import { token } from '@atlaskit/tokens';
 const textDescriptionProps = { ...messages.could_not_load_link
 };
 export const blockCardErroredViewClassName = 'block-card-errored-view';
@@ -47,7 +48,7 @@ export const ErroredView = ({
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
@@ -55,7 +56,7 @@ export const ForbiddenView = ({
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.danger', R300),
       testId: `${testId}-lock-icon`
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -14,6 +14,7 @@ import { ContentHeader } from '../components/ContentHeader';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { handleClickCommon } from '../utils/handlers';
+import { token } from '@atlaskit/tokens';
 const textDescriptionProps = { ...messages.not_found_description
 };
 export const blockCardNotFoundViewClassName = 'block-card-not-found-view';
@@ -45,7 +46,7 @@ export const NotFoundView = ({
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { Frame } from '../components/Frame';
 import { gs } from '../../common/utils';
 import { FormattedMessage } from 'react-intl-next';
@@ -20,12 +21,12 @@ export const ResolvingView = ({
   className: blockCardResolvingViewClassName
 }, jsx(DocumentFilledIcon, {
   size: "small",
-  primaryColor: N50,
+  primaryColor: token('color.icon.subtle', N50),
   label: "document-icon"
 }), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
-    color: N90,
+    color: token('color.text.subtlest', N90),
     marginLeft: gs(0.5)
   }
 }, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/CardWithUrl/component.js

@@ -25,7 +25,8 @@ export function CardWithUrlContent({
   embedIframeRef,
   inlinePreloaderStyle,
   ui,
-  children
+  children,
+  showHoverPreview
 }) {
   // Get state, actions for this card.
   const {
@@ -123,7 +124,8 @@ export function CardWithUrlContent({
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

package/dist/es2019/view/CardWithUrl/loader.js

@@ -38,7 +38,8 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle,
     createAnalyticsEvent,
     children,
-    ui
+    ui,
+    showHoverPreview
   } = props; // Wrapper around analytics.
 
   const dispatchAnalytics = useCallback(analyticsPayload => {
@@ -94,7 +95,8 @@ export function CardWithURLRenderer(props) {
     platform,
     embedIframeRef,
     inlinePreloaderStyle,
-    ui
+    ui,
+    showHoverPreview
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,