@atlaskit/smart-card 34.2.2 → 34.4.0

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

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon"];
+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';
+var getActionStyles = function 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
+      }
+    });
+  }
+};
+var getTitleBlockViewComponent = function 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
+ */
+var TitleBlock = function TitleBlock(_ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    anchorTarget = _ref.anchorTarget,
+    hideTitleTooltip = _ref.hideTitleTooltip,
+    maxLines = _ref.maxLines,
+    onActionMenuOpenChange = _ref.onActionMenuOpenChange,
+    onClick = _ref.onClick,
+    overrideCss = _ref.overrideCss,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+    showActionOnHover = _ref.showActionOnHover,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
+    text = _ref.text,
+    icon = _ref.icon,
+    theme = _ref.theme,
+    hideRetry = _ref.hideRetry,
+    metadataPosition = _ref.metadataPosition,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (hideRetry && props.retry) {
+    delete props.retry;
+  }
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    actionDropdownOpen = _useState2[0],
+    setActionDropdownOpen = _useState2[1];
+  var onDropdownOpenChange = useCallback(function (isOpen) {
+    setActionDropdownOpen(isOpen);
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: onDropdownOpenChange
+  });
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  var combinedCss = css(actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var onMouseDown = useMouseDownEvent();
+  var title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
+    maxLines: maxLines,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  var 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/esm/view/FlexibleCard/components/blocks/title-block/errored/TitleBlockErroredViewOld.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
+/**
+ * @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';
+var 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'
+  }
+});
+var 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
+ */
+var getMessageStyles = function getMessageStyles(size, hasAction) {
+  var 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)".concat(" 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
+ */
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var actionGroup = _ref.actionGroup,
+    retry = _ref.retry,
+    position = _ref.position,
+    testId = _ref.testId,
+    title = _ref.title,
+    icon = _ref.icon,
+    hideIcon = _ref.hideIcon,
+    blockProps = _objectWithoutProperties(_ref, _excluded);
+  var _ref2 = retry || {},
+    descriptor = _ref2.descriptor,
+    onClick = _ref2.onClick,
+    values = _ref2.values;
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var hasAction = onClick !== undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(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: "".concat(testId, "-errored-view-message"),
+    tabIndex: hasAction ? 0 : -1
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))), actionGroup);
+};
+export default TitleBlockErroredView;

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

@@ -1,55 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
-/**
- * @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';
-var 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'
-  }
-});
-var actionHoverStyles = css({
-  position: 'relative',
-  zIndex: 1,
-  '&:focus': {
-    outlineOffset: "var(--ds-space-negative-025, -2px)"
-  }
-});
-var getMessageStyles = function getMessageStyles(size, hasAction) {
-  var 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)".concat(" 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.
@@ -58,7 +17,7 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+var TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
   var actionGroup = _ref.actionGroup,
     retry = _ref.retry,
     position = _ref.position,
@@ -71,26 +30,22 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     descriptor = _ref2.descriptor,
     onClick = _ref2.onClick,
     values = _ref2.values;
-  var _blockProps$size = blockProps.size,
-    size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(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: "".concat(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/esm/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}

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

@@ -1,46 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon"];
-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';
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon", "className"];
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 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';
-var getActionStyles = function 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
-      }
-    });
-  }
-};
+import { TitleBlockErroredViewNew } from './errored';
+import { TitleBlockResolvedViewNew } from './resolved';
+import { TitleBlockResolvingViewNew } from './resolving';
+import TitleBlockOld from './TitleBlockOld';
+var styles = null;
+var actionStyles = null;
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return TitleBlockResolvingView;
+      return TitleBlockResolvingViewNew;
     case SmartLinkStatus.Resolved:
-      return TitleBlockResolvedView;
+      return TitleBlockResolvedViewNew;
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return TitleBlockErroredView;
+      return TitleBlockErroredViewNew;
   }
 };
 
@@ -52,11 +43,11 @@ var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
  * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
- * @see TitleBlockResolvingView
- * @see TitleBlockResolvedView
- * @see TitleBlockErroredView
+ * @see TitleBlockResolvingViewNew
+ * @see TitleBlockResolvedViewNew
+ * @see TitleBlockErroredViewNew
  */
-var TitleBlock = function TitleBlock(_ref) {
+var TitleBlockNew = function TitleBlockNew(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     anchorTarget = _ref.anchorTarget,
@@ -64,7 +55,6 @@ var TitleBlock = function TitleBlock(_ref) {
     maxLines = _ref.maxLines,
     onActionMenuOpenChange = _ref.onActionMenuOpenChange,
     onClick = _ref.onClick,
-    overrideCss = _ref.overrideCss,
     _ref$status = _ref.status,
     status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
     showActionOnHover = _ref.showActionOnHover,
@@ -77,6 +67,7 @@ var TitleBlock = function TitleBlock(_ref) {
     metadataPosition = _ref.metadataPosition,
     _ref$hideIcon = _ref.hideIcon,
     hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   if (hideRetry && props.retry) {
     delete props.retry;
@@ -98,9 +89,6 @@ var TitleBlock = function TitleBlock(_ref) {
     visibleButtonsNum: showActionOnHover ? 1 : 2,
     onDropdownOpenChange: onDropdownOpenChange
   });
-  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var combinedCss = css(actionStyles, overrideCss);
   var overrideText = !!text ? {
     text: text
   } : {};
@@ -114,14 +102,25 @@ var TitleBlock = function TitleBlock(_ref) {
     theme: theme
   }, overrideText));
   var Component = getTitleBlockViewComponent(status);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    actionGroup: actionGroup,
-    overrideCss: combinedCss,
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n"])
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: className,
     testId: testId,
     title: title,
     metadataPosition: metadataPosition,
     hideIcon: hideIcon,
     icon: icon
-  }));
+  })));
+};
+var TitleBlock = function TitleBlock(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TitleBlockOld, props);
+  }
 };
 export default TitleBlock;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/TitleBlockResolvedViewOld.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon"];
+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, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
+import { LinkIcon } from '../../../elements';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { renderElementItems } from '../../utils';
+/**
+ * This renders a fully resolved TitleBlock.
+ * This should render when a Smart Link returns a valid response.
+ * @see TitleBlock
+ */
+var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+  var actionGroup = _ref.actionGroup,
+    _ref$metadata = _ref.metadata,
+    metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+    position = _ref.position,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+    testId = _ref.testId,
+    text = _ref.text,
+    icon = _ref.icon,
+    title = _ref.title,
+    metadataPosition = _ref.metadataPosition,
+    hideIcon = _ref.hideIcon,
+    blockProps = _objectWithoutProperties(_ref, _excluded);
+  var metadataElements = renderElementItems(metadata);
+  var subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
+    overrideIcon: icon,
+    position: position
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible,
+    overrideCss: css({
+      gap: "var(--ds-space-050, 0.25rem)"
+    })
+  }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right,
+    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center
+  }, metadataElements), actionGroup);
+};
+export default TitleBlockResolvedView;

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

@@ -0,0 +1 @@
+._zulppdf9{gap:var(--ds-space-050,.25rem)}

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -1,21 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon"];
-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 { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
-import ElementGroup from '../../element-group';
+import { ElementGroupNew as ElementGroup } from '../../element-group';
 import { renderElementItems } from '../../utils';
+import TitleBlockResolvedViewOld from './TitleBlockResolvedViewOld';
+var style = null;
+
 /**
  * This renders a fully resolved TitleBlock.
  * This should render when a Smart Link returns a valid response.
  * @see TitleBlock
  */
-var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+var TitleBlockResolvedViewNew = function TitleBlockResolvedViewNew(_ref) {
   var actionGroup = _ref.actionGroup,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
@@ -39,15 +42,16 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible,
-    overrideCss: css({
-      gap: "var(--ds-space-050, 0.25rem)"
-    })
+    size: blockProps.size,
+    className: ax(["_zulppdf9"])
   }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right,
-    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center
+    position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center,
+    size: blockProps.size
   }, metadataElements), actionGroup);
 };
-export default TitleBlockResolvedView;
+export default TitleBlockResolvedViewOld;
+export { TitleBlockResolvedViewNew };

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/TitleBlockResolvingViewOld.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { SmartLinkSize } from '../../../../../../constants';
+import LoadingSkeleton from '../../../common/loading-skeleton';
+import { getIconSizeStyles, getIconWidth } from '../../../utils';
+import Block from '../../block';
+/**
+ * This represents a TitleBlock for a Smart Link that is currently waiting
+ * for a request to finish.
+ * This should render when a Smart Link has sent a request.
+ * @see TitleBlock
+ */
+var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+  var actionGroup = _ref.actionGroup,
+    testId = _ref.testId,
+    title = _ref.title,
+    hideIcon = _ref.hideIcon,
+    blockProps = _objectWithoutProperties(_ref, _excluded);
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var iconWidth = getIconWidth(size);
+  var iconStyles = getIconSizeStyles(iconWidth);
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolving-view")
+  }), !hideIcon &&
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  jsx("span", {
+    css: iconStyles,
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(LoadingSkeleton, {
+    testId: "".concat(testId, "-icon-loading")
+  })), title, actionGroup);
+};
+export default TitleBlockResolvingView;