@atlaskit/smart-card 34.3.0 → 34.5.0

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,92 +1,52 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getMaxLineHeight, getTruncateStyles } from '../../utils';
-import { getBaseStyles, getGapSize, renderChildren } from '../utils';
-const getAlignmentStyles = align => {
-  switch (align) {
-    case SmartLinkAlignment.Right:
-      return css({
-        WebkitBoxAlign: 'end',
-        MsFlexAlign: 'end',
-        justifyContent: 'flex-end',
-        textAlign: 'right'
-      });
-    case SmartLinkAlignment.Left:
-    default:
-      return css({
-        WebkitBoxAlign: 'start',
-        MsFlexAlign: 'start',
-        justifyContent: 'flex-start',
-        textAlign: 'left'
-      });
-  }
+import { renderChildren } from '../utils';
+import ElementGroupOld from './ElementGroupOld';
+const alignmentStyleMap = {
+  right: "_1dthh9n0 _r291h9n0 _1bahesu3 _y3gnusic",
+  left: "_1dthv2br _r291v2br _1bah1y6m _y3gn1e5h"
 };
-const getGapStyles = (size, align) => {
-  const gap = getGapSize(size);
-  if (align === SmartLinkAlignment.Right) {
-    return css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '> span': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        marginLeft: `${gap}rem`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '> span:first-child': {
-        marginLeft: 'initial'
-      }
-    });
-  }
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginRight: `${gap}rem`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '&:last-child': {
-        marginRight: 'initial'
-      }
-    }
-  });
+const baseStyleBySize = {
+  xlarge: "_zulp147b _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  large: "_zulp1e9d _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  medium: "_zulpcxkx _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  small: "_zulppdf9 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf"
 };
-const getHorizontalDirectionStyles = (size, align) => {
-  const lineHeight = getMaxLineHeight(size);
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return css`
-		display: block;
-		vertical-align: middle;
-		${getTruncateStyles(1, lineHeight + 'rem')}
-
-		> span, > div {
-			vertical-align: middle;
-
-			&[data-smart-element-date-time],
-			&[data-smart-element-text] {
-				// Show all/wrapped/truncated
-				display: inline;
-			}
-		}
-
-		${getGapStyles(size, align)}
-	`;
+const baseStyleByDirection = {
+  horizontal: "_2lx2vrvc _4cvr1h6o",
+  vertical: "_2lx21bp4 _4cvr1y6m"
+};
+const baseStyle = null;
+const widthStyle = {
+  flexible: "_16jlkb7n _1o9z11wp _i0dlf1ug",
+  'fit-to-content': ""
+};
+const positionStyle = {
+  top: "_1wpz1y6m",
+  center: ""
+};
+const horizontalStyleBase = null;
+const horizontalStyleByHeight = {
+  xlarge: "_1e0ccj1k _102k1m1q",
+  large: "_1e0ccj1k _102k1m1q",
+  medium: "_1e0ccj1k _102k1k8s",
+  small: "_1e0ccj1k _102k1k8s"
+};
+const gapStylesLeft = {
+  xlarge: "_7yhb147b _m6ukidpf",
+  large: "_7yhb1e9d _m6ukidpf",
+  medium: "_7yhbcxkx _m6ukidpf",
+  small: "_7yhbpdf9 _m6ukidpf"
+};
+const gapStylesRight = {
+  xlarge: "_24rc147b _3dveidpf",
+  large: "_24rc1e9d _3dveidpf",
+  medium: "_24rccxkx _3dveidpf",
+  small: "_24rcpdf9 _3dveidpf"
 };
-export const getElementGroupStyles = (direction, size, align, width, position) => 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
-getBaseStyles(direction, size),
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-getAlignmentStyles(align), {
-  minWidth: '10%'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-width === SmartLinkWidth.Flexible ? `flex: 1 3;` : '',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -95,19 +55,24 @@ position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-const ElementGroup = ({
+const ElementGroupNew = ({
   align = SmartLinkAlignment.Left,
   children,
-  overrideCss,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent,
-  position = SmartLinkPosition.Center
-}) => jsx("div", {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
-  "data-smart-element-group": true,
-  "data-testid": testId
-}, renderChildren(children, size));
-export default ElementGroup;
+  position = SmartLinkPosition.Center,
+  className
+}) => {
+  const totalCss = [baseStyleBySize[size], baseStyleByDirection[direction], baseStyle, alignmentStyleMap[align], null, widthStyle[width], direction === SmartLinkDirection.Horizontal ? horizontalStyleBase : {}, direction === SmartLinkDirection.Horizontal ? horizontalStyleByHeight[size] : {}, direction === SmartLinkDirection.Horizontal ? SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size] : {}, positionStyle[position]];
+  return /*#__PURE__*/React.createElement("div", {
+    "data-smart-element-group": true,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && "", SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
+  }, renderChildren(children, size));
+};
+export default ElementGroupOld;
+export { ElementGroupNew };

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/MetadataBlockOld.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { renderElementItems } from '../utils';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+const getElementGroupStyles = (size, maxLines) => {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  const lineHeight = getMaxLineHeight(size);
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    lineHeight: `${lineHeight}rem`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getTruncateStyles(maxLines, lineHeight + 'rem'));
+};
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+const MetadataBlockOld = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-metadata',
+  primary = [],
+  secondary = [],
+  ...blockProps
+}) => {
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  const primaryElements = renderElementItems(primary);
+  const secondaryElements = renderElementItems(secondary);
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+export default MetadataBlockOld;

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/index.compiled.css

@@ -0,0 +1,10 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -1,28 +1,26 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 import Block from '../block';
-import ElementGroup from '../element-group';
+import { ElementGroupNew as ElementGroup } from '../element-group';
 import { renderElementItems } from '../utils';
+import MetadataBlockOld from './MetadataBlockOld';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
-const getElementGroupStyles = (size, maxLines) => {
-  // MetadataBlock allows metadata elements to be displayed in
-  // multiple lines, with maximum of 2 lines.
-  // We need the height of the line to be equal on both left and right
-  // sides so they line up nicely.
-  const lineHeight = getMaxLineHeight(size);
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-    lineHeight: `${lineHeight}rem`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getTruncateStyles(maxLines, lineHeight + 'rem'));
+const truncateStyles = {
+  '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
+  '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
+};
+const sizeStyles = {
+  xlarge: "_11c81oud _102k1k7u",
+  large: "_11c81oud _102k1k7u",
+  medium: "_11c81oud _102k1wto",
+  small: "_11c81oud _102k1wto"
 };
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -57,19 +55,26 @@ const MetadataBlock = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
-  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  const maxLinesTotal = getMaxLines(maxLines);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };
-export default MetadataBlock;
+const MetadataBlockExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MetadataBlock, props);
+  } else {
+    return /*#__PURE__*/React.createElement(MetadataBlockOld, props);
+  }
+};
+export default MetadataBlockExported;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/TitleBlockOld.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { SmartLinkStatus } from '../../../../../constants';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+import { Title } from '../../elements';
+import ActionGroup from '../action-group';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockResolvingView from './resolving';
+const getActionStyles = (showOnHover, isOpen) => {
+  if (showOnHover && !isOpen) {
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.actions-button-group': {
+        opacity: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
+      }
+    });
+  }
+};
+const getTitleBlockViewComponent = status => {
+  switch (status) {
+    case SmartLinkStatus.Pending:
+    case SmartLinkStatus.Resolving:
+      return TitleBlockResolvingView;
+    case SmartLinkStatus.Resolved:
+      return TitleBlockResolvedView;
+    case SmartLinkStatus.Unauthorized:
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.NotFound:
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return TitleBlockErroredView;
+  }
+};
+
+/**
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+const TitleBlock = ({
+  actions = [],
+  anchorTarget,
+  hideTitleTooltip,
+  maxLines,
+  onActionMenuOpenChange,
+  onClick,
+  overrideCss,
+  status = SmartLinkStatus.Fallback,
+  showActionOnHover,
+  testId = 'smart-block-title',
+  text,
+  icon,
+  theme,
+  hideRetry,
+  metadataPosition,
+  hideIcon = false,
+  ...props
+}) => {
+  if (hideRetry && props.retry) {
+    delete props.retry;
+  }
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    setActionDropdownOpen(isOpen);
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  const actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: onDropdownOpenChange
+  });
+  const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  const combinedCss = css(actionStyles, overrideCss);
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const onMouseDown = useMouseDownEvent();
+  const title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
+    maxLines: maxLines,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  const Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title,
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon,
+    icon: icon
+  }));
+};
+export default TitleBlock;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/TitleBlockErroredViewOld.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
+import { LinkIcon } from '../../../elements';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+const actionStyles = css({
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
+const actionHoverStyles = css({
+  position: 'relative',
+  zIndex: 1,
+  '&:focus': {
+    outlineOffset: "var(--ds-space-negative-025, -2px)"
+  }
+});
+
+/**
+ * This function does not work in the component below as it needs to be xcss.
+ * The component instead uses inherited styles
+ */
+const getMessageStyles = (size, hasAction) => {
+  const sizeStyles = getLinkSizeStyles(size);
+  return css({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionStyles : '',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  sizeStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getTruncateStyles(1, getLinkLineHeight(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    ':focus': {
+      outline: `${"var(--ds-border-focused, #388BFF)"} solid 2px`
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionHoverStyles : '');
+};
+
+/**
+ * Represents an Errored TitleBlock view.
+ * This will render when a Smart Link did not successfully resolve.
+ * This may be a result of a Smart Link not having the correct credentials,
+ * or the backend response was errored or malformed.
+ * @see TitleBlock
+ */
+const TitleBlockErroredView = ({
+  actionGroup,
+  retry,
+  position,
+  testId,
+  title,
+  icon,
+  hideIcon,
+  ...blockProps
+}) => {
+  const {
+    descriptor,
+    onClick,
+    values
+  } = retry || {};
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const hasAction = onClick !== undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-errored-view`
+  }), !hideIcon && jsx(LinkIcon, {
+    overrideIcon: icon,
+    position: position
+  }), title, descriptor && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, jsx(Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
+    onClick: onClick,
+    testId: `${testId}-errored-view-message`,
+    tabIndex: hasAction ? 0 : -1
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))), actionGroup);
+};
+export default TitleBlockErroredView;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,53 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// 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 { FormattedMessage } from 'react-intl-next';
 import { Box } from '@atlaskit/primitives';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
+import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-const actionStyles = css({
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    color: "var(--ds-text-subtle, #8993A4)",
-    textDecoration: 'underline'
-  }
-});
-const actionHoverStyles = css({
-  position: 'relative',
-  zIndex: 1,
-  '&:focus': {
-    outlineOffset: "var(--ds-space-negative-025, -2px)"
-  }
-});
-const getMessageStyles = (size, hasAction) => {
-  const sizeStyles = getLinkSizeStyles(size);
-  return css({
-    flex: '1 1 auto',
-    justifyContent: 'flex-end'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasAction ? actionStyles : '',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  sizeStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getTruncateStyles(1, getLinkLineHeight(size)), {
-    color: "var(--ds-text-disabled, #6B778C)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':focus': {
-      outline: `${"var(--ds-border-focused, #388BFF)"} solid 2px`
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasAction ? actionHoverStyles : '');
-};
+import TitleBlockErroredViewOld from './TitleBlockErroredViewOld';
 
 /**
  * Represents an Errored TitleBlock view.
@@ -56,7 +15,7 @@ const getMessageStyles = (size, hasAction) => {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-const TitleBlockErroredView = ({
+const TitleBlockErroredViewNew = ({
   actionGroup,
   retry,
   position,
@@ -71,27 +30,22 @@ const TitleBlockErroredView = ({
     onClick,
     values
   } = retry || {};
-  const {
-    size = SmartLinkSize.Medium
-  } = blockProps;
   const hasAction = onClick !== undefined;
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-errored-view`
-  }), !hideIcon && jsx(LinkIcon, {
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
     position: position
-  }), title, descriptor && jsx(ElementGroup, {
+  }), title, descriptor && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, jsx(Box
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  , {
-    xcss: getMessageStyles(size, hasAction),
+  }, /*#__PURE__*/React.createElement(Box, {
     onClick: onClick,
     testId: `${testId}-errored-view-message`,
     tabIndex: hasAction ? 0 : -1
-  }, jsx(FormattedMessage, _extends({}, descriptor, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredView;
+export default TitleBlockErroredViewOld;
+export { TitleBlockErroredViewNew };

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.compiled.css

@@ -0,0 +1,2 @@
+._1bfhidpf .actions-button-group{opacity:0}
+._wn5xkb7n:hover .actions-button-group, ._h157kb7n .actions-button-group:focus-within{opacity:1}