@atlaskit/smart-card 34.3.0 → 34.4.0

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}

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

@@ -1,43 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 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 "./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';
-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
-      }
-    });
-  }
-};
+import { TitleBlockErroredViewNew } from './errored';
+import { TitleBlockResolvedViewNew } from './resolved';
+import { TitleBlockResolvingViewNew } from './resolving';
+import TitleBlockOld from './TitleBlockOld';
+const styles = null;
+const actionStyles = null;
 const 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;
   }
 };
 
@@ -49,18 +40,17 @@ const getTitleBlockViewComponent = status => {
  * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
- * @see TitleBlockResolvingView
- * @see TitleBlockResolvedView
- * @see TitleBlockErroredView
+ * @see TitleBlockResolvingViewNew
+ * @see TitleBlockResolvedViewNew
+ * @see TitleBlockErroredViewNew
  */
-const TitleBlock = ({
+const TitleBlockNew = ({
   actions = [],
   anchorTarget,
   hideTitleTooltip,
   maxLines,
   onActionMenuOpenChange,
   onClick,
-  overrideCss,
   status = SmartLinkStatus.Fallback,
   showActionOnHover,
   testId = 'smart-block-title',
@@ -70,6 +60,7 @@ const TitleBlock = ({
   hideRetry,
   metadataPosition,
   hideIcon = false,
+  className,
   ...props
 }) => {
   if (hideRetry && props.retry) {
@@ -89,9 +80,6 @@ const TitleBlock = ({
     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
   } : {};
@@ -105,14 +93,25 @@ const TitleBlock = ({
     theme: theme
   }, overrideText));
   const 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
-  }));
+  })));
+};
+const 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/es2019/view/FlexibleCard/components/blocks/title-block/resolved/TitleBlockResolvedViewOld.js

@@ -0,0 +1,50 @@
+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, 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
+ */
+const TitleBlockResolvedView = ({
+  actionGroup,
+  metadata = [],
+  position,
+  subtitle = [],
+  testId,
+  text,
+  icon,
+  title,
+  metadataPosition,
+  hideIcon,
+  ...blockProps
+}) => {
+  const metadataElements = renderElementItems(metadata);
+  const subtitleElements = renderElementItems(subtitle);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${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/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.compiled.css

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

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

@@ -1,19 +1,22 @@
+/* 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 { 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';
+const style = null;
+
 /**
  * This renders a fully resolved TitleBlock.
  * This should render when a Smart Link returns a valid response.
  * @see TitleBlock
  */
-const TitleBlockResolvedView = ({
+const TitleBlockResolvedViewNew = ({
   actionGroup,
   metadata = [],
   position,
@@ -36,15 +39,16 @@ const TitleBlockResolvedView = ({
   }), /*#__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/es2019/view/FlexibleCard/components/blocks/title-block/resolving/TitleBlockResolvingViewOld.js

@@ -0,0 +1,42 @@
+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 { 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
+ */
+const TitleBlockResolvingView = ({
+  actionGroup,
+  testId,
+  title,
+  hideIcon,
+  ...blockProps
+}) => {
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const iconWidth = getIconWidth(size);
+  const iconStyles = getIconSizeStyles(iconWidth);
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${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": `${testId}-icon`
+  }, jsx(LoadingSkeleton, {
+    testId: `${testId}-icon-loading`
+  })), title, actionGroup);
+};
+export default TitleBlockResolvingView;

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

@@ -0,0 +1,55 @@
+._16jlidpf{flex-grow:0}
+._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
+._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
+._19l3oqnp img, ._1pr2oqnp span, ._1u5toqnp svg{max-height:.75rem}
+._19l3viql img, ._1pr2viql span, ._1u5tviql svg{max-height:2rem}
+._1bsb1j6v{width:1rem}
+._1bsb1k8s{width:1.5rem}
+._1bsboqnp{width:.75rem}
+._1bsbviql{width:2rem}
+._1o9zidpf{flex-shrink:0}
+._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
+._1rg21k8s img, ._q7cv1k8s span, ._xwbj1k8s svg{min-width:1.5rem}
+._1rg2oqnp img, ._q7cvoqnp span, ._xwbjoqnp svg{min-width:.75rem}
+._1rg2viql img, ._q7cvviql span, ._xwbjviql svg{min-width:2rem}
+._1tke1j6v{min-height:1rem}
+._1tke1k8s{min-height:1.5rem}
+._1tkeoqnp{min-height:.75rem}
+._1tkeviql{min-height:2rem}
+._1ul91j6v{min-width:1rem}
+._1ul91k8s{min-width:1.5rem}
+._1ul9oqnp{min-width:.75rem}
+._1ul9viql{min-width:2rem}
+._4t3i1j6v{height:1rem}
+._4t3i1k8s{height:1.5rem}
+._4t3ioqnp{height:.75rem}
+._4t3iviql{height:2rem}
+._5jw9idpf svg{padding-bottom:0}
+._7wy9idpf svg{padding-left:0}
+._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
+._bna71k8s img, ._1xjx1k8s span, ._17521k8s svg{height:1.5rem}
+._bna7oqnp img, ._1xjxoqnp span, ._1752oqnp svg{height:.75rem}
+._bna7viql img, ._1xjxviql span, ._1752viql svg{height:2rem}
+._c71l1j6v{max-height:1rem}
+._c71l1k8s{max-height:1.5rem}
+._c71loqnp{max-height:.75rem}
+._c71lviql{max-height:2rem}
+._i0dl1wug{flex-basis:auto}
+._i2i3idpf svg{padding-top:0}
+._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._mezj1k8s img, ._e2oo1k8s span, ._w8l51k8s svg{width:1.5rem}
+._mezjoqnp img, ._e2oooqnp span, ._w8l5oqnp svg{width:.75rem}
+._mezjviql img, ._e2ooviql span, ._w8l5viql svg{width:2rem}
+._p12f1j6v{max-width:1rem}
+._p12f1k8s{max-width:1.5rem}
+._p12foqnp{max-width:.75rem}
+._p12fviql{max-width:2rem}
+._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
+._qci81k8s img, ._15iz1k8s span, ._erub1k8s svg{min-height:1.5rem}
+._qci8oqnp img, ._15izoqnp span, ._eruboqnp svg{min-height:.75rem}
+._qci8viql img, ._15izviql span, ._erubviql svg{min-height:2rem}
+._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._rtys1k8s img, ._b8nk1k8s span, ._4x201k8s svg{max-width:1.5rem}
+._rtysoqnp img, ._b8nkoqnp span, ._4x20oqnp svg{max-width:.75rem}
+._rtysviql img, ._b8nkviql span, ._4x20viql svg{max-width:2rem}
+._uhasidpf svg{padding-right:0}

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

@@ -1,22 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 
-// 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';
+import TitleBlockResolvingViewOld from './TitleBlockResolvingViewOld';
+const iconStyle = {
+  'xlarge': "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  'large': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  'medium': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  'small': "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
+};
 /**
  * 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
  */
-const TitleBlockResolvingView = ({
+const TitleBlockResolvingViewNew = ({
   actionGroup,
   testId,
   title,
@@ -26,17 +31,14 @@ const TitleBlockResolvingView = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
-  const iconWidth = getIconWidth(size);
-  const iconStyles = getIconSizeStyles(iconWidth);
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${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": `${testId}-icon`
-  }, jsx(LoadingSkeleton, {
+  }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+    "data-testid": `${testId}-icon`,
+    className: ax([iconStyle[size]])
+  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
     testId: `${testId}-icon-loading`
   })), title, actionGroup);
 };
-export default TitleBlockResolvingView;
+export default TitleBlockResolvingViewOld;
+export { TitleBlockResolvingViewNew };

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -3,10 +3,12 @@ import Loadable from 'react-loadable';
 import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
 import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
 import { IconType } from '../../../../../constants';
+import { getLazyIcons } from '../../../../../utils';
 // prettier-ignore
-const importIconMapper = {
+const importIconMapperOld = {
   [IconType.Archive]: () => import( /* webpackChunkName: "glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16'),
   [IconType.Audio]: () => import( /* webpackChunkName: "glyphAudio" */'@atlaskit/icon-file-type/glyph/audio/16'),
   [IconType.Code]: () => import( /* webpackChunkName: "glyphCode" */'@atlaskit/icon-file-type/glyph/source-code/16'),
@@ -82,7 +84,12 @@ const importIconMapper = {
   [IconType.Subscriber]: () => import( /* webpackChunkName: "glyphSubscriber" */'@atlaskit/icon/glyph/people'),
   [IconType.SubTasksProgress]: () => import( /* webpackChunkName: "glyphSubtaskProgress" */'@atlaskit/icon/glyph/subtask')
 };
-const getIconImportFn = icon => importIconMapper[icon];
+const getIconImportFn = icon => {
+  if (fg('platform-smart-card-icon-migration')) {
+    return getLazyIcons()[icon];
+  }
+  return importIconMapperOld[icon];
+};
 const importIcon = importFn => {
   return Loadable({
     loader: () => importFn().then(module => module.default),

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.3.0",
+  packageVersion: "34.4.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');