@atlaskit/smart-card 27.5.4 → 27.6.1

package/dist/esm/state/hooks/use-ai-summary/index.js

@@ -1,18 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useCallback, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { AISummariesStore } from './ai-summary-service/store';
 import { AISummaryService } from './ai-summary-service';
-import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
-import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
-var EXPERIENCE_NAME = 'smart-link-ai-summary';
+/**
+ * Stream AI summary for an url.
+ * For hook specific to AI summary on as a smart link, please see useAISummaryAction.
+ */
 export var useAISummary = function useAISummary(props) {
   var _AISummariesStore$get;
   var url = props.url,
     baseUrl = props.baseUrl,
-    headers = props.headers,
     product = props.product,
     ari = props.ari,
-    envKey = props.envKey;
+    envKey = props.envKey,
+    onError = props.onError,
+    onStart = props.onStart,
+    onSuccess = props.onSuccess;
   var _useState = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
       status: 'ready',
       content: ''
@@ -20,28 +23,6 @@ export var useAISummary = function useAISummary(props) {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var _useAnalyticsEvents = useAnalyticsEvents(),
-    fireEvent = _useAnalyticsEvents.fireEvent;
-  var onStart = useCallback(function (id) {
-    startUfoExperience(EXPERIENCE_NAME, id);
-  }, []);
-  var onSuccess = useCallback(function (id) {
-    fireEvent('operational.summary.success', {});
-    succeedUfoExperience(EXPERIENCE_NAME, id);
-  }, [fireEvent]);
-  var onError = useCallback(function (id, reason) {
-    /**
-     * Errors should only be counted to the SLO if they are not due to acceptable use violations
-     * HIPAA content detected or exceeding context length.
-     */
-
-    var isSloError = reason === undefined ? true : !['ACCEPTABLE_USE_VIOLATIONS', 'HIPAA_CONTENT_DETECTED', 'EXCEEDING_CONTEXT_LENGTH_ERROR'].includes(reason);
-    fireEvent('operational.summary.failed', {
-      reason: reason || null,
-      isSloError: isSloError
-    });
-    failUfoExperience(EXPERIENCE_NAME, id);
-  }, [fireEvent]);
   useEffect(function () {
     var _AISummariesStore$get2;
     //do not create a service for the empty URL string when the link data is not yet available,
@@ -51,18 +32,17 @@ export var useAISummary = function useAISummary(props) {
         url: url,
         ari: ari,
         baseUrl: baseUrl,
-        headers: headers,
+        product: product,
+        envKey: envKey,
         onError: onError,
         onStart: onStart,
-        onSuccess: onSuccess,
-        product: product,
-        envKey: envKey
+        onSuccess: onSuccess
       }));
     }
 
     //returns function that calls unsubscribe method
     return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
-  }, [url, baseUrl, headers, onError, onStart, onSuccess, product, ari, envKey]);
+  }, [url, baseUrl, onError, onStart, onSuccess, product, ari, envKey]);
   var summariseUrl = function summariseUrl() {
     var _AISummariesStore$get3;
     return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();

package/dist/esm/state/hooks/use-ai-summary-action/index.js

@@ -0,0 +1,52 @@
+import { extractAri, extractLink } from '@atlaskit/link-extractors';
+import { useCallback } from 'react';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
+import { failUfoExperience, startUfoExperience, succeedUfoExperience } from '../../analytics';
+import { useSmartCardState } from '../../store';
+import { useAISummary } from '../use-ai-summary';
+import { useAISummaryConfig } from '../use-ai-summary-config';
+var EXPERIENCE_NAME = 'smart-link-ai-summary';
+var useAISummaryAction = function useAISummaryAction(url) {
+  var _cardState$details;
+  var _useAISummaryConfig = useAISummaryConfig(),
+    baseUrl = _useAISummaryConfig.baseUrl,
+    envKey = _useAISummaryConfig.envKey,
+    product = _useAISummaryConfig.product;
+  var cardState = useSmartCardState(url);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  var ari = data && extractAri(data);
+  var dataUrl = data && extractLink(data) || '';
+  var onStart = useCallback(function (id) {
+    startUfoExperience(EXPERIENCE_NAME, id);
+  }, []);
+  var onSuccess = useCallback(function (id) {
+    fireEvent('operational.summary.success', {});
+    succeedUfoExperience(EXPERIENCE_NAME, id);
+  }, [fireEvent]);
+  var onError = useCallback(function (id, reason) {
+    /**
+     * Errors should only be counted to the SLO if they are not due to acceptable use violations
+     * HIPAA content detected or exceeding context length.
+     */
+
+    var isSloError = reason === undefined ? true : !['ACCEPTABLE_USE_VIOLATIONS', 'HIPAA_CONTENT_DETECTED', 'EXCEEDING_CONTEXT_LENGTH_ERROR'].includes(reason);
+    fireEvent('operational.summary.failed', {
+      reason: reason || null,
+      isSloError: isSloError
+    });
+    failUfoExperience(EXPERIENCE_NAME, id);
+  }, [fireEvent]);
+  return useAISummary({
+    url: dataUrl,
+    ari: ari,
+    product: product,
+    envKey: envKey,
+    baseUrl: baseUrl,
+    onStart: onStart,
+    onSuccess: onSuccess,
+    onError: onError
+  });
+};
+export default useAISummaryAction;

package/dist/esm/state/hooks/use-ai-summary-config/index.js

@@ -2,12 +2,15 @@ import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { useMemo } from 'react';
 export var useAISummaryConfig = function useAISummaryConfig() {
   var _useSmartLinkContext = useSmartLinkContext(),
+    connections = _useSmartLinkContext.connections,
     product = _useSmartLinkContext.product,
     isAdminHubAIEnabled = _useSmartLinkContext.isAdminHubAIEnabled;
   return useMemo(function () {
     return {
+      baseUrl: connections.client.baseUrlOverride,
+      envKey: connections.client.envKey,
       product: product,
       isAdminHubAIEnabled: isAdminHubAIEnabled
     };
-  }, [product, isAdminHubAIEnabled]);
+  }, [connections.client.baseUrlOverride, connections.client.envKey, product, isAdminHubAIEnabled]);
 };

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.5.4"
+  packageVersion: "27.6.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/mocks.js

@@ -159,6 +159,9 @@ export var mocks = {
     status: 'resolved',
     details: {
       meta: {
+        visibility: 'public',
+        access: 'granted',
+        auth: [],
         definitionId: 'spaghetti-id',
         key: 'spaghetti-key',
         resourceType: 'spaghetti-resource',

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

@@ -1,10 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { ActionIcon } from './ActionIcon';
 export var spinnerDelay = 1000;
+var baseTextStyles = css({
+  transition: 'opacity 0.3s'
+});
 export var Action = function Action(_ref) {
   var promise = _ref.promise,
     text = _ref.text,
@@ -37,10 +41,9 @@ export var Action = function Action(_ref) {
       }
     }
   }, jsx("div", {
-    css: {
-      transition: 'opacity 0.3s',
+    css: [baseTextStyles, {
       opacity: state !== 'init' ? 0 : 1
-    }
+    }]
   }, text), jsx(ActionIcon, {
     state: state
   }));

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

@@ -2,7 +2,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["triggerRef"];
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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';
@@ -10,14 +11,18 @@ import MoreIcon from '@atlaskit/icon/glyph/more';
 import { Action } from './Action';
 import { gs, mq } from '../../common/utils';
 import { di } from 'react-magnetic-di';
+var buttonStyles = css({
+  height: 'auto'
+});
 export var ActionList = function ActionList(_ref) {
   var items = _ref.items;
   var actionsToShow = items.slice(0, 2);
   var 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(function (action) {
@@ -25,7 +30,7 @@ export var ActionList = function ActionList(_ref) {
       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)
@@ -39,9 +44,7 @@ export var ActionList = function ActionList(_ref) {
           label: "more"
         }),
         ref: triggerRef,
-        css: {
-          height: 'auto'
-        },
+        css: buttonStyles,
         testId: "dropdown-trigger"
       }));
     },

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { mq } from '../../common/utils';
@@ -13,25 +14,28 @@ export var CollaboratorList = function CollaboratorList(_ref) {
   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: function onAvatarClick(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      handleAvatarClick(event);
-    },
-    onMoreClick: function 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: function onAvatarClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        handleAvatarClick(event);
+      },
+      onMoreClick: function onMoreClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        handleMoreAvatarsClick(event);
+      },
+      testId: testId
+    }))
+  );
 };

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 /**
@@ -13,8 +14,9 @@ export var Content = function Content(_ref) {
     _ref$isCompact = _ref.isCompact,
     isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact;
   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({
-      // 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/esm/view/BlockCard/components/ContentFooter.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export var contentFooterClassName = 'smart-link-content-footer';
@@ -7,13 +8,14 @@ export var ContentFooter = function ContentFooter(_ref) {
     _ref$hasSpaceBetween = _ref.hasSpaceBetween,
     hasSpaceBetween = _ref$hasSpaceBetween === void 0 ? false : _ref$hasSpaceBetween;
   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',
       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/esm/view/BlockCard/components/ContentHeader.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 /**
  * Class name for selecting non-flexible block card header
@@ -8,6 +9,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 var blockCardContentHeaderClassName = 'block-card-content-header';
+var 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 var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,
     link = _ref.link,
@@ -18,13 +26,7 @@ export var ContentHeader = function ContentHeader(_ref) {
     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/esm/view/BlockCard/components/Emoji.js

@@ -1,17 +1,21 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import { gs } from '../../common/utils';
+var 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 var Emoji = function Emoji(_ref) {
   var emoji = _ref.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/esm/view/BlockCard/components/Frame.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
@@ -28,13 +29,16 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     className = _ref.className,
     isFluidHeight = _ref.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(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
         // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
         backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(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 ".concat(isSelected ? "var(--ds-border-selected, ".concat(B200, ")") : 'transparent'),
       justifyContent: 'space-between',
@@ -56,18 +60,21 @@ export var CompactFrame = function CompactFrame(_ref2) {
     className = _ref2.className,
     inheritDimensions = _ref2.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(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
         backgroundColor: "var(--ds-background-neutral-hovered, ".concat(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 ".concat("var(--ds-border-selected, ".concat(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, ".concat(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 ".concat(gs(1)), '0']
     })),
     "data-testid": testId

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

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../../common/utils';
 /**
@@ -9,6 +10,22 @@ 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 var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+var baseStyles = css({
+  fontSize: "".concat(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 var Name = function Name(_ref) {
   var name = _ref.name,
     _ref$isLeftPadded = _ref.isLeftPadded,
@@ -16,23 +33,13 @@ export var Name = function Name(_ref) {
     testId = _ref.testId,
     textColor = _ref.textColor;
   return jsx("span", {
-    css: {
-      fontSize: "".concat(fontSize(), "px"),
-      fontWeight: 500,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    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',
-      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)
-    },
+      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

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

@@ -1,7 +1,30 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
+var 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'
+});
+var 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)
+});
+var textStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(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 var Provider = function Provider(_ref) {
   var name = _ref.name,
     icon = _ref.icon;
@@ -10,29 +33,13 @@ export var Provider = function Provider(_ref) {
     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, ".concat(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));
 };