@atlaskit/smart-card 27.5.3 → 27.6.0

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

@@ -10,6 +10,21 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
+var wrapperStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-050, 4px)"
+});
+var imgStyles = (0, _react.css)({
+  width: "var(--ds-space-100, 8px)",
+  height: "var(--ds-space-100, 8px)"
+});
+var textStyles = (0, _react.css)({
+  fontSize: "var(--ds-space-150, 12px)",
+  color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
+  marginRight: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-025, 2px)"
+});
 var Metadata = exports.Metadata = function Metadata(_ref) {
   var text = _ref.text,
     icon = _ref.icon,
@@ -19,25 +34,13 @@ var Metadata = exports.Metadata = function Metadata(_ref) {
   if (!metadataIcon && iconUrl) {
     metadataIcon = (0, _react.jsx)("img", {
       src: iconUrl,
-      css: {
-        width: "var(--ds-space-100, 8px)",
-        height: "var(--ds-space-100, 8px)"
-      }
+      css: imgStyles
     });
   }
   var metadata = (0, _react.jsx)("div", {
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-      marginRight: "var(--ds-space-050, 4px)"
-    }
+    css: wrapperStyles
   }, metadataIcon, (0, _react.jsx)("span", {
-    css: {
-      fontSize: "var(--ds-space-150, 12px)",
-      color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
-      marginRight: "var(--ds-space-050, 4px)",
-      marginLeft: "var(--ds-space-025, 2px)"
-    }
+    css: textStyles
   }, text));
   if (tooltip) {
     return (0, _react.jsx)(_tooltip.default, {

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

@@ -12,19 +12,21 @@ var _utils = require("./utils");
 /** @jsx jsx */
 
 var metadataListClassName = exports.metadataListClassName = 'smart-link-metadata-list';
+var wrapperStyles = (0, _react.css)({
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginTop: (0, _utils.gs)(0.5),
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&:last-child': {
+    marginRight: '0px'
+  }
+});
 var MetadataList = exports.MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
     testId = _ref.testId;
   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': {
-        marginRight: '0px'
-      }
-    },
+    css: wrapperStyles,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -15,6 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var namespaceUUID = 0;
 var svgStyles = (0, _react.css)({
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _constants.OUTER_BORDER_RADIUS
 });
 var blurredStyles = (0, _react.css)({
@@ -74,6 +75,7 @@ var AnimatedSvgContainer = function AnimatedSvgContainer(_ref) {
     return undefined;
   }, [isMoving]);
   return (0, _react.jsx)("svg", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: [svgStyles, isGlowing ? blurredStyles : notBlurredStyles, additionalCss],
     ref: svgRef,
     viewBox: "0 0 24 24",

package/dist/cjs/view/common/ai-prism/ai-glowing-border/index.js

@@ -17,7 +17,10 @@ var borderContainerStyles = (0, _react.css)({
   padding: "var(--ds-space-025, 2px)",
   width: 'fit-content'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var borderContentStyles = exports.borderContentStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: _constants.INNER_BORDER_RADIUS,
   flexGrow: 1,
   zIndex: 1 // needs to be more than the svg container at least

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

@@ -36,6 +36,7 @@ var AIPrism = function AIPrism(_ref) {
   return (0, _react.jsx)(_aiGlowingBorder.default, {
     additionalCss: {
       animatedSvgContainer: (0, _react.css)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         opacity: isVisible ? 1 : 0,
         transition: 'opacity 0.5s ease'
       })
@@ -45,7 +46,9 @@ var AIPrism = function AIPrism(_ref) {
     isMoving: isMoving,
     testId: testId
   }, (0, _react.jsx)("div", {
-    css: [_styled.popupContainerStyles, contentStyles, isVisible ? contentStylesPrismVisible : undefined]
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    _styled.popupContainerStyles, contentStyles, isVisible ? contentStylesPrismVisible : undefined]
   }, children));
 };
 var _default = exports.default = AIPrism;

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: "27.5.3"
+  packageVersion: "27.6.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,9 +1,12 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { ActionIcon } from './ActionIcon';
 export const spinnerDelay = 1000;
+const baseTextStyles = css({
+  transition: 'opacity 0.3s'
+});
 export const Action = ({
   promise,
   text,
@@ -31,10 +34,9 @@ export const Action = ({
       }
     }
   }, jsx("div", {
-    css: {
-      transition: 'opacity 0.3s',
+    css: [baseTextStyles, {
       opacity: state !== 'init' ? 0 : 1
-    }
+    }]
   }, text), jsx(ActionIcon, {
     state: state
   }));

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
@@ -8,21 +8,25 @@ import MoreIcon from '@atlaskit/icon/glyph/more';
 import { Action } from './Action';
 import { gs, mq } from '../../common/utils';
 import { di } from 'react-magnetic-di';
+const buttonStyles = css({
+  height: 'auto'
+});
 export const ActionList = ({
   items
 }) => {
   const actionsToShow = items.slice(0, 2);
   const actionsToList = items.slice(2, items.length);
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       display: 'flex',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       marginTop: [gs(2), 0]
     })
   }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
     key: action.id
   }, action)))), actionsToList.length ?
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("div", {
     css: {
       marginLeft: gs(0.5)
@@ -36,9 +40,7 @@ export const ActionList = ({
         label: "more"
       }),
       ref: triggerRef,
-      css: {
-        height: 'auto'
-      },
+      css: buttonStyles,
       testId: "dropdown-trigger"
     })),
     placement: "right-start"

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

@@ -11,25 +11,28 @@ export const CollaboratorList = ({
   if (items.length === 0) {
     return null;
   }
-  return jsx("span", {
-    css: mq({
-      display: ['none', 'inherit']
-    })
-  }, jsx(AvatarGroup, {
-    maxCount: 4,
-    appearance: "stack",
-    size: "small",
-    data: items,
-    onAvatarClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-      handleAvatarClick(event);
-    },
-    onMoreClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-      handleMoreAvatarsClick(event);
-    },
-    testId: testId
-  }));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: mq({
+        display: ['none', 'inherit']
+      })
+    }, jsx(AvatarGroup, {
+      maxCount: 4,
+      appearance: "stack",
+      size: "small",
+      data: items,
+      onAvatarClick: event => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleAvatarClick(event);
+      },
+      onMoreClick: event => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleMoreAvatarsClick(event);
+      },
+      testId: testId
+    }))
+  );
 };

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

@@ -12,8 +12,9 @@ export const Content = ({
   children,
   isCompact = false
 }) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css: mq({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     padding: isCompact ? gs(1) : gs(2),
     display: 'flex',
     flexDirection: 'column',

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

@@ -6,13 +6,14 @@ export const ContentFooter = ({
   children,
   hasSpaceBetween = false
 }) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css: mq({
     display: 'flex',
     flexDirection: ['column', 'row'],
     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
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     marginTop: [gs(1), gs(1.5)]
   })
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 /**
  * Class name for selecting non-flexible block card header
@@ -8,6 +8,13 @@ import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export const blockCardContentHeaderClassName = 'block-card-content-header';
+const styles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  // EDM-713: fixes copy-paste from renderer to editor for Firefox
+  // due to HTML its unwrapping behaviour on paste.
+  MozUserSelect: 'none'
+});
 export const ContentHeader = ({
   onClick,
   link,
@@ -19,13 +26,7 @@ export const ContentHeader = ({
     onMouseDown: onMouseDown,
     href: link,
     target: "_blank",
-    css: {
-      display: 'flex',
-      alignItems: 'flex-start',
-      // EDM-713: fixes copy-paste from renderer to editor for Firefox
-      // due to HTML its unwrapping behaviour on paste.
-      MozUserSelect: 'none'
-    },
+    css: styles,
     "data-trello-do-not-use-override": "block-card-content-header"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

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

@@ -1,18 +1,21 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import { gs } from '../../common/utils';
+const styles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: gs(2.5),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: gs(2),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-negative-025, -2px)"
+});
 export const Emoji = ({
   emoji
 }) => {
   return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: "var(--ds-space-negative-025, -2px)"
-    }
+    css: styles
   }, emoji);
 };

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

@@ -23,6 +23,7 @@ export const ExpandedFrame = ({
   isFluidHeight
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedFrameStyles,
       '&:hover': isHoverable ? {
@@ -30,7 +31,9 @@ export const ExpandedFrame = ({
         backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20A})`,
         cursor: 'pointer'
       } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       borderRadius: isSelected ? br() : br(0.5),
       border: `2px solid ${isSelected ? `var(--ds-border-selected, ${B200})` : 'transparent'}`,
       justifyContent: 'space-between',
@@ -53,19 +56,22 @@ export const CompactFrame = ({
   inheritDimensions
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedFrameStyles,
       '&:hover': isHoverable ? {
         backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
       } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       borderRadius: isSelected ? br() : br(0.5),
       border: isSelected ? `2px solid ${`var(--ds-border-selected, ${B200})`}` : '',
       justifyContent: 'center',
       alignItems: 'center',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       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
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       padding: [`0px ${gs(1)}`, '0']
     }),
     "data-testid": testId

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

@@ -1,6 +1,10 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
+const styles = css({
+  color: `var(--ds-link, ${B400})`,
+  wordBreak: 'break-all'
+});
 export const Link = ({
   url,
   testId = 'block-card',
@@ -11,9 +15,6 @@ export const Link = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: className,
-    css: {
-      color: `var(--ds-link, ${B400})`,
-      wordBreak: 'break-all'
-    }
+    css: styles
   }, url);
 };

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../../common/utils';
 /**
@@ -9,32 +9,40 @@ import { gs } from '../../common/utils';
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export const blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+const baseStyles = css({
+  fontSize: `${fontSize()}px`,
+  fontWeight: 500,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  lineHeight: gs(2.5),
+  // Spec: show max two lines.
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-word',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  // Fallback options.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxHeight: gs(6)
+});
 export const Name = ({
   name,
   isLeftPadded = true,
   testId,
   textColor
-}) => jsx("span", {
-  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.
-    display: '-webkit-box',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    wordBreak: 'break-word',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical',
-    color: textColor ? textColor : 'inherit',
-    // Fallback options.
-    maxHeight: gs(6)
-  },
-  "data-testid": testId,
-  "data-trello-do-not-use-override": "block-card-content-header-name"
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  ,
-  className: blockCardContentHeaderNameClassName
-}, name);
+}) => {
+  return jsx("span", {
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      marginLeft: isLeftPadded ? gs(1) : '0',
+      color: textColor ? textColor : 'inherit'
+    }],
+    "data-testid": testId,
+    "data-trello-do-not-use-override": "block-card-content-header-name"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: blockCardContentHeaderNameClassName
+  }, name);
+};

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

@@ -1,7 +1,29 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
+const wrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  fontSize: gs(1.5),
+  whiteSpace: 'normal'
+});
+const imgStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: gs(1.5),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: gs(1.5)
+});
+const textStyles = css({
+  color: `var(--ds-text-subtlest, ${N300})`,
+  margin: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginLeft: gs(0.5),
+  // EDM-713: fixes copy-paste from renderer to editor for Firefox
+  // due to HTML its unwrapping behaviour on paste.
+  MozUserSelect: 'none'
+});
 export const Provider = ({
   name,
   icon
@@ -11,29 +33,13 @@ export const Provider = ({
     iconToRender = jsx("img", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "smart-link-icon",
-      css: {
-        height: gs(1.5),
-        width: gs(1.5)
-      },
+      css: imgStyles,
       src: icon
     });
   }
   return jsx("div", {
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: gs(1.5),
-      whiteSpace: 'normal'
-    }
+    css: wrapperStyles
   }, iconToRender, jsx("span", {
-    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.
-      MozUserSelect: 'none'
-    }
+    css: textStyles
   }, name));
 };

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const Thumbnail = props => {
   return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);
@@ -15,6 +15,7 @@ export const ThumbnailDefault = ({
   testId
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedStyles,
       backgroundSize: 'cover',
@@ -26,12 +27,17 @@ export const ThumbnailDefault = ({
     "data-trello-do-not-use-override": testId
   });
 };
+const thumbnailImgStyles = css({
+  height: '90px',
+  width: '90px'
+});
 export const ThumbnailWithBackground = ({
   src,
   color,
   testId
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedStyles,
       backgroundColor: color,
@@ -43,9 +49,6 @@ export const ThumbnailWithBackground = ({
     "data-trello-do-not-use-override": testId
   }, jsx("img", {
     src: src,
-    css: {
-      height: '90px',
-      width: '90px'
-    }
+    css: thumbnailImgStyles
   }));
 };

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+const styles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
 export const UnresolvedText = ({
   icon,
   text
 }) => {
   return jsx("span", {
-    css: {
-      display: 'flex',
-      alignItems: 'center'
-    }
+    css: styles
   }, icon, text);
 };

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

@@ -88,6 +88,7 @@ export const ResolvedView = ({
     textColor: titleTextColor
   }), lozenge && jsx(LozengeBlockWrapper, {
     css: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       height: gs(2.5),
       display: 'flex',
       alignItems: 'center',