@atlaskit/smart-card 34.5.0 → 34.5.2

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

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../constants");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
@@ -63,11 +66,14 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
   );
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.SmartLinkSize.Medium;
   if (icon) {
-    return (0, _react2.jsx)(_atlaskitIcon.default, {
+    return (0, _react2.jsx)(_atlaskitIcon.default, (0, _extends2.default)({
       icon: icon,
       testId: "".concat(testId, "-icon")
-    });
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      size: size
+    }));
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
@@ -78,12 +84,17 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.SmartLinkSize.Medium;
+  var width = size === _constants.SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return (0, _react2.jsx)(_imageIcon.default, {
+    return (0, _react2.jsx)(_imageIcon.default, (0, _extends2.default)({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
-    });
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      width: width,
+      height: width
+    }));
   }
 };
 
@@ -110,18 +121,34 @@ var Icon = function Icon(_ref) {
     url = _ref.url;
   var element = (0, _react.useMemo)(function () {
     var 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, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = (0, _utils.getIconWidth)(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _react2.jsx)("div", {
+    css: [
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    css: [styles, renderStyles, overrideCss],
+    !(0, _platformFeatureFlags.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);
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_primitives.Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width: width,
+      height: width
+    }
+  }, element) : element);
 };
+var iconWrapperStyle = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var _default = exports.default = Icon;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.importIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getPrimitivesPaddingSpaceBySize = exports.getPrimitivesInlineSpaceBySize = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.importIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getPrimitivesPaddingSpaceBySize = exports.getPrimitivesInlineSpaceBySize = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidthOld = exports.getIconWidthNew = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var sizeToButtonSpacing = exports.sizeToButtonSpacing = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.SmartLinkSize.Small, 'none'), _constants.SmartLinkSize.Medium, 'compact'), _constants.SmartLinkSize.Large, 'compact'), _constants.SmartLinkSize.XLarge, 'default');
@@ -59,7 +60,9 @@ var getIconSizeStyles = exports.getIconSizeStyles = function getIconSizeStyles(w
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tflex: 0 0 auto;\n\t\t", "\n\t\tspan,\n    svg,\n    img {\n\t\t\t", "\n\t\t}\n\t\tsvg {\n\t\t\tpadding: 0;\n\t\t}\n\t"])), sizeStyles, sizeStyles);
 };
-var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+var getIconWidthOld = exports.getIconWidthOld = function getIconWidthOld(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
       return '2rem';
@@ -72,6 +75,24 @@ var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
       return '.75rem';
   }
 };
+
+// TODO Rename to getIconWidth when cleaning platform-smart-card-icon-migration
+var getIconWidthNew = exports.getIconWidthNew = function getIconWidthNew(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return "var(--ds-space-300, 24px)";
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return "var(--ds-space-200, 16px)";
+  }
+};
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
+  return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? getIconWidthNew(size) : getIconWidthOld(size);
+};
 var importIcon = exports.importIcon = function importIcon(importFn) {
   return (0, _reactLoadable.default)({
     loader: function loader() {

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

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
-var _loadingSkeleton = _interopRequireDefault(require("../../../../FlexibleCard/components/common/loading-skeleton"));
+var _loadingSkeleton = require("../../../../FlexibleCard/components/common/loading-skeleton");
 var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
 var _styled = require("../../../styled");
 var _styled2 = require("./styled");
@@ -17,6 +19,7 @@ var _styled2 = require("./styled");
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
@@ -26,40 +29,52 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
   var size = titleBlockProps.size,
     actions = titleBlockProps.actions;
-  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react.jsx)(_actionGroup.default, {
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (0, _react2.jsx)(_actionGroup.default, {
     items: actions,
     visibleButtonsNum: 2
   });
+  var LoadingSkeleton = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _loadingSkeleton.LoadingSkeletonNew : _loadingSkeleton.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
-    (0, _react.jsx)("div", {
+    (0, _react2.jsx)("div", {
       css: _styled2.loadingViewContainer,
       "data-testid": testId
-    }, (0, _react.jsx)("div", {
+    }, (0, _react2.jsx)("div", {
       css: _styled2.skeletonContainer
-    }, (0, _react.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
+    }, (0, _react2.jsx)(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
       overrideCss: _styled2.titleBlockStyles,
       testId: "".concat(testId, "-title-block")
-    }), (0, _react.jsx)(_icon.default, {
+    }), (0, _react2.jsx)(_icon.default, {
       render: function render() {
-        return (0, _react.jsx)(_loadingSkeleton.default, null);
+        return (0, _react2.jsx)(LoadingSkeleton, null);
       },
       size: size
-    }), (0, _react.jsx)("span", {
+    }), (0, _react2.jsx)("span", {
       css: (0, _styled2.getTitleStyles)(lineHeightRem),
       "data-testid": "".concat(testId, "-title")
-    }, (0, _react.jsx)(_loadingSkeleton.default, {
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      height: "".concat(lineHeightRem, "rem")
+    }) : (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
       height: lineHeightRem
-    })), actionGroup), (0, _react.jsx)(_loadingSkeleton.default, {
+    })), actionGroup), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem * 3, "rem")
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    }), (0, _react.jsx)(_loadingSkeleton.default, {
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem * 3
-    }), (0, _react.jsx)(_loadingSkeleton.default, {
+    }), (0, _react2.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    })))
+    }))))
   );
 };
 var _default = exports.default = HoverCardLoadingView;

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.5.0",
+  packageVersion: "34.5.2",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/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';
-const 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';
+const AngleBracketsIconWithColor = renderIconTile(AngleBracketsIcon, 'blueBold', LegacyIcon);
 AngleBracketsIconWithColor.displayName = 'AngleBracketsIconWithColor';
 export default AngleBracketsIconWithColor;

package/dist/es2019/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';
-const 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';
+const AudioIconWithColor = renderIconTile(AudioIcon, 'redBold', LegacyIcon);
 AudioIconWithColor.displayName = 'AudioIconWithColor';
 export default AudioIconWithColor;

package/dist/es2019/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';
+const BlogIconWithColor = renderIconPerSize(BlogIconSmall, BlogIconLarge);
+BlogIconWithColor.displayName = 'BlogIconWithColor';
+export default BlogIconWithColor;

package/dist/es2019/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';
-const 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';
+const ChartBarIconWithColor = renderIconTile(ChartBarIcon, 'purpleBold', LegacyIcon);
 ChartBarIconWithColor.displayName = 'ChartBarIconWithColor';
 export default ChartBarIconWithColor;

package/dist/es2019/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';
-const 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';
+const FileIconWithColor = renderIconTile(FileIcon, 'grayBold', LegacyIcon);
 FileIconWithColor.displayName = 'FileIconWithColor';
 export default FileIconWithColor;

package/dist/es2019/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';
-const 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';
+const FolderClosedIconWithColor = renderIconTile(FolderClosedIcon, 'blueBold', LegacyIcon);
 FolderClosedIconWithColor.displayName = 'FolderClosedIconWithColor';
 export default FolderClosedIconWithColor;

package/dist/es2019/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';
-const 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';
+const ImageIconWithColor = renderIconTile(ImageIcon, 'yellowBold', LegacyIcon);
 ImageIconWithColor.displayName = 'ImageIconWithColor';
 export default ImageIconWithColor;

package/dist/es2019/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';
-const 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';
+const ListBulletedIconWithColor = renderIconTile(ListBulletedIcon, 'greenBold', LegacyIcon);
 ListBulletedIconWithColor.displayName = 'ListBulletedIconWithColor';
 export default ListBulletedIconWithColor;

package/dist/es2019/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';
-const 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';
+const PageIconWithColor = renderIconTile(PageIcon, 'blueBold', LegacyIcon);
 PageIconWithColor.displayName = 'PageIconWithColor';
 export default PageIconWithColor;

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

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

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

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

package/dist/es2019/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';
-const 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';
+const VideoIconWithColor = renderIconTile(VideoIcon, 'redBold', LegacyIcon);
 VideoIconWithColor.displayName = 'VideoIconWithColor';
 export default VideoIconWithColor;

package/dist/es2019/utils/analytics/analytics.js

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