@atlaskit/smart-card 34.5.0 → 34.5.2

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

@@ -1,25 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ImageLoader from 'react-render-image';
-import LoadingSkeleton from '../loading-skeleton';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../loading-skeleton';
 const ImageIcon = ({
   defaultIcon,
   testId,
   url,
+  width,
+  height,
   onError,
   onLoad
-}) => /*#__PURE__*/React.createElement(ImageLoader, {
-  src: url,
-  loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
-    testId: `${testId}-loading`
+}) => /*#__PURE__*/React.createElement(ImageLoader, _extends({
+  src: url
+}, fg('platform-smart-card-icon-migration') ? {
+  loading: /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+    testId: `${testId}-loading`,
+    width: width,
+    height: height
+  }),
+  loaded: /*#__PURE__*/React.createElement("img", {
+    src: url,
+    "data-testid": `${testId}-image`,
+    alt: "",
+    style: {
+      width,
+      height
+    }
   })
+} : {
+  loading: /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+    testId: `${testId}-loading`
+  }),
   // eslint-disable-next-line jsx-a11y/alt-text
-  ,
   loaded: /*#__PURE__*/React.createElement("img", {
     src: url,
     "data-testid": `${testId}-image`
-  }),
+  })
+}, {
   errored: defaultIcon,
   onError: onError,
   onLoad: onLoad
-});
+}));
 export default ImageIcon;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,12 +1,10 @@
 
 ._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
-._1bsb9tg7{width:var(--_1ea5ebz)}
 ._1e0c1o8l{display:inline-block}
 ._1itkvl7m{background-image:linear-gradient(to right,transparent 0,var(--ds-skeleton,#edeef1) 20%,transparent 40%,transparent 100%)}
 ._1lrw6rms{background-size:280% 100%}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1pglp3kn{animation-timing-function:linear}
-._4t3imry4{height:var(--_roksyz)}
 ._5sag9cwz{animation-duration:1s}
 ._bfhk178v{background-color:var(--ds-skeleton-subtle,#f6f7f8)}
 ._j7hqqkar{animation-name:kc09ee}

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,31 +1,33 @@
 /* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
-import LoadingSkeletonOld from './LoadingSkeletonOld';
+import LoadingSkeletonEmotionOld from './LoadingSkeletonOld';
 const animationNameStyles = null;
+const loadingSkeletonStyle = null;
 const LoadingSkeletonNew = ({
   testId,
   width,
   height
 }) => {
-  const styles = null;
-
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
-    className: ax(["_2rkoyh40 _1bsb9tg7 _4t3imry4 _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
-      "--_1ea5ebz": ix(width, "rem"),
-      "--_roksyz": ix(height, "rem")
-    }
+      width,
+      height
+    },
+    className: ax(["_2rkoyh40 _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"])
   });
 };
-const LoadingSkeleton = props => {
+const LoadingSkeletonOld = props => {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, props);
+    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, _extends({}, props, {
+      width: `${props.width}rem`,
+      height: `${props.height}rem`
+    }));
   }
-  return /*#__PURE__*/React.createElement(LoadingSkeletonOld, props);
+  return /*#__PURE__*/React.createElement(LoadingSkeletonEmotionOld, props);
 };
-export default LoadingSkeleton;
+export { LoadingSkeletonOld, LoadingSkeletonNew };

package/dist/es2019/view/FlexibleCard/components/container/index.compiled.css

@@ -1,15 +1,16 @@
-._18s8v77o{margin:var(--ds-space-025,2px)}
+
 ._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
 ._1yt418y6{padding:var(--_1xumd0e)}
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulp1jvo{gap:1.25rem 0}
 ._zulp1qos{gap:.5rem 0}
 ._zulpfzsm{gap:.25rem 0}
-._zulph3jc{gap:1rem 0}
+._zulph3jc{gap:1rem 0}._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bv15sf{padding-left:calc(var(--preview-block-width) + 1.25rem)}
 ._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
 ._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
 ._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1pcmkb7n:hover~.actions-button-group{opacity:1}
 ._1reo15vq{overflow-x:hidden}
@@ -20,11 +21,13 @@
 ._1yob1kwk{--container-gap-right:.5rem}
 ._1yob1wow{--container-gap-right:var(--_12k13bg)}
 ._1yob6mu8{--container-gap-right:.25rem}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._2lx21bp4{flex-direction:column}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
 ._jb7v18y6{--container-padding:var(--_1xumd0e)}
 ._kqswh2mm{position:relative}
 ._nqwih2mm .has-action, ._18ywh2mm a, ._1nq3h2mm button{position:relative}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._r37x1r5k{--preview-block-width:30%}
 ._u5f315sf{padding-right:calc(var(--preview-block-width) + 1.25rem)}
 ._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -180,7 +180,7 @@ const ContainerNew = ({
   const container = /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
-    className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19ith6cr _2rkopd34 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
+    className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19ith6cr _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
     style: {
       "--_1xumd0e": ix(padding),
       "--_73mooq": ix(previewOnLeft ? gap : padding),

package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,8 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
@@ -45,12 +48,14 @@ css(getTruncateStyles(1, value), {
     verticalAlign: 'baseline'
   }
 });
-const renderAtlaskitIcon = (icon, testId) => {
+const renderAtlaskitIcon = (icon, testId, size = SmartLinkSize.Medium) => {
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, _extends({
       icon: icon,
       testId: `${testId}-icon`
-    });
+    }, fg('platform-smart-card-icon-migration') && {
+      size
+    }));
   }
 };
 const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
@@ -58,13 +63,17 @@ const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
   testId: `${testId}-default`,
   color: "currentColor"
 });
-const renderImageIcon = (defaultIcon, url, testId) => {
+const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium) => {
+  const width = size === SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return jsx(ImageIcon, {
+    return jsx(ImageIcon, _extends({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
-    });
+    }, fg('platform-smart-card-icon-migration') && {
+      width,
+      height: width
+    }));
   }
 };
 
@@ -88,18 +97,34 @@ const Icon = ({
 }) => {
   const element = useMemo(() => {
     const defaultIcon = renderDefaultIcon(label, testId);
-    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId) || renderAtlaskitIcon(icon, testId) || defaultIcon;
-  }, [overrideIcon, icon, label, render, testId, url]);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
   const width = getIconWidth(size);
   const styles = getIconStyles(position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
+    css: [
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    css: [styles, renderStyles, overrideCss],
+    !fg('platform-smart-card-icon-migration') && styles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    renderStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
-  }, element);
+  }, fg('platform-smart-card-icon-migration') ? jsx(Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width,
+      height: width
+    }
+  }, element) : element);
 };
+const iconWrapperStyle = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 export default Icon;

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Loadable from 'react-loadable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../../constants';
 export const sizeToButtonSpacing = {
   [SmartLinkSize.Small]: 'none',
@@ -69,7 +70,9 @@ export const getIconSizeStyles = width => {
 		}
 	`;
 };
-export const getIconWidth = size => {
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+export const getIconWidthOld = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '2rem';
@@ -82,6 +85,24 @@ export const getIconWidth = size => {
       return '.75rem';
   }
 };
+
+// TODO Rename to getIconWidth when cleaning platform-smart-card-icon-migration
+export const getIconWidthNew = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return "var(--ds-space-300, 24px)";
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return "var(--ds-space-200, 16px)";
+  }
+};
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+export const getIconWidth = size => {
+  return fg('platform-smart-card-icon-migration') ? getIconWidthNew(size) : getIconWidthOld(size);
+};
 export const importIcon = importFn => {
   return Loadable({
     loader: () => importFn().then(module => module.default),

package/dist/es2019/view/HoverCard/components/views/resolving/index.js

@@ -3,11 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
-import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
 import Icon from '../../../../FlexibleCard/components/elements/icon';
 import { CARD_WIDTH_REM } from '../../../styled';
 import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
@@ -25,6 +28,7 @@ const HoverCardLoadingView = ({
     items: actions,
     visibleButtonsNum: 2
   });
+  const LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : LoadingSkeletonOld;
   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("div", {
@@ -41,18 +45,29 @@ const HoverCardLoadingView = ({
     }), jsx("span", {
       css: getTitleStyles(lineHeightRem),
       "data-testid": `${testId}-title`
-    }, jsx(LoadingSkeleton, {
+    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
+      height: `${lineHeightRem}rem`
+    }) : jsx(LoadingSkeletonOld, {
       height: lineHeightRem
-    })), actionGroup), jsx(LoadingSkeleton, {
+    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem}rem`
+    }), jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem * 3}rem`
+    }), jsx(LoadingSkeletonNew, {
+      width: `${skeletonWidth}rem`,
+      height: `${lineHeightRem}rem`
+    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    }), jsx(LoadingSkeleton, {
+    }), jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem * 3
-    }), jsx(LoadingSkeleton, {
+    }), jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    })))
+    }))))
   );
 };
 export default HoverCardLoadingView;

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.5.0",
+  packageVersion: "34.5.2",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/common/ui/icons/angle-brackets-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/source-code/16';
 import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-var AngleBracketsIconWithColor = function AngleBracketsIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "blueBold",
-    icon: AngleBracketsIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var AngleBracketsIconWithColor = renderIconTile(AngleBracketsIcon, 'blueBold', LegacyIcon);
 AngleBracketsIconWithColor.displayName = 'AngleBracketsIconWithColor';
 export default AngleBracketsIconWithColor;

package/dist/esm/common/ui/icons/audio-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/audio/16';
 import AudioIcon from '@atlaskit/icon/core/audio';
-var AudioIconWithColor = function AudioIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "redBold",
-    icon: AudioIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var AudioIconWithColor = renderIconTile(AudioIcon, 'redBold', LegacyIcon);
 AudioIconWithColor.displayName = 'AudioIconWithColor';
 export default AudioIconWithColor;

package/dist/esm/common/ui/icons/blog-icon.js

@@ -0,0 +1,6 @@
+import BlogIconSmall from '@atlaskit/icon-object/glyph/blog/16';
+import BlogIconLarge from '@atlaskit/icon-object/glyph/blog/24';
+import { renderIconPerSize } from './utils';
+var BlogIconWithColor = renderIconPerSize(BlogIconSmall, BlogIconLarge);
+BlogIconWithColor.displayName = 'BlogIconWithColor';
+export default BlogIconWithColor;

package/dist/esm/common/ui/icons/chart-bar-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/presentation/16';
 import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-var ChartBarIconWithColor = function ChartBarIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "purpleBold",
-    icon: ChartBarIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var ChartBarIconWithColor = renderIconTile(ChartBarIcon, 'purpleBold', LegacyIcon);
 ChartBarIconWithColor.displayName = 'ChartBarIconWithColor';
 export default ChartBarIconWithColor;

package/dist/esm/common/ui/icons/file-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/generic/16';
 import FileIcon from '@atlaskit/icon/core/file';
-var FileIconWithColor = function FileIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "grayBold",
-    icon: FileIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var FileIconWithColor = renderIconTile(FileIcon, 'grayBold', LegacyIcon);
 FileIconWithColor.displayName = 'FileIconWithColor';
 export default FileIconWithColor;

package/dist/esm/common/ui/icons/folder-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/folder/16';
 import FolderClosedIcon from '@atlaskit/icon/core/folder-closed';
-var FolderClosedIconWithColor = function FolderClosedIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "blueBold",
-    icon: FolderClosedIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var FolderClosedIconWithColor = renderIconTile(FolderClosedIcon, 'blueBold', LegacyIcon);
 FolderClosedIconWithColor.displayName = 'FolderClosedIconWithColor';
 export default FolderClosedIconWithColor;

package/dist/esm/common/ui/icons/image-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/image/16';
 import ImageIcon from '@atlaskit/icon/core/image';
-var ImageIconWithColor = function ImageIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "yellowBold",
-    icon: ImageIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var ImageIconWithColor = renderIconTile(ImageIcon, 'yellowBold', LegacyIcon);
 ImageIconWithColor.displayName = 'ImageIconWithColor';
 export default ImageIconWithColor;

package/dist/esm/common/ui/icons/list-bullet-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/spreadsheet/16';
 import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-var ListBulletedIconWithColor = function ListBulletedIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "greenBold",
-    icon: ListBulletedIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var ListBulletedIconWithColor = renderIconTile(ListBulletedIcon, 'greenBold', LegacyIcon);
 ListBulletedIconWithColor.displayName = 'ListBulletedIconWithColor';
 export default ListBulletedIconWithColor;

package/dist/esm/common/ui/icons/page-icon.js

@@ -1,16 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/document/16';
 import PageIcon from '@atlaskit/icon/core/page';
-var PageIconWithColor = function PageIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({
-    appearance: "blueBold",
-    icon: PageIcon,
-    size: "16"
-  }, props, {
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var PageIconWithColor = renderIconTile(PageIcon, 'blueBold', LegacyIcon);
 PageIconWithColor.displayName = 'PageIconWithColor';
 export default PageIconWithColor;

package/dist/esm/common/ui/icons/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/common/ui/icons/utils.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size"],
+  _excluded2 = ["size"];
+import React from 'react';
+import { IconTile } from '@atlaskit/icon';
+import { SmartLinkSize } from '../../../constants';
+import { isIconSizeLarge } from '../../../utils';
+export var transformSmartLinkSizeToIconTileSize = function transformSmartLinkSizeToIconTileSize(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '24';
+    default:
+      return '16';
+  }
+};
+export var renderIconPerSize = function renderIconPerSize(IconSmall, IconLarge) {
+  return function (_ref) {
+    var size = _ref.size,
+      props = _objectWithoutProperties(_ref, _excluded);
+    if (isIconSizeLarge(size)) {
+      return /*#__PURE__*/React.createElement(IconLarge, props);
+    }
+    return /*#__PURE__*/React.createElement(IconSmall, props);
+  };
+};
+export var renderIconTile = function renderIconTile(Icon, appearance, LegacyIcon) {
+  return function (_ref2) {
+    var size = _ref2.size,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement(IconTile, _extends({
+      appearance: appearance,
+      icon: Icon,
+      size: transformSmartLinkSizeToIconTileSize(size)
+    }, props, {
+      LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
+    }));
+  };
+};

package/dist/esm/common/ui/icons/video-icon.js

@@ -1,15 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { IconTile } from '@atlaskit/icon';
 import LegacyIcon from '@atlaskit/icon-file-type/glyph/video/16';
 import VideoIcon from '@atlaskit/icon/core/video';
-var VideoIconWithColor = function VideoIconWithColor(props) {
-  return /*#__PURE__*/React.createElement(IconTile, _extends({}, props, {
-    appearance: "redBold",
-    icon: VideoIcon,
-    size: "16",
-    LEGACY_fallbackComponent: /*#__PURE__*/React.createElement(LegacyIcon, props)
-  }));
-};
+import { renderIconTile } from './utils';
+var VideoIconWithColor = renderIconTile(VideoIcon, 'redBold', LegacyIcon);
 VideoIconWithColor.displayName = 'VideoIconWithColor';
 export default VideoIconWithColor;

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

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