@atlaskit/smart-card 34.4.0 → 34.5.1

package/dist/esm/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';
@@ -52,11 +55,14 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
   );
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SmartLinkSize.Medium;
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, _extends({
       icon: icon,
       testId: "".concat(testId, "-icon")
-    });
+    }, fg('platform-smart-card-icon-migration') && {
+      size: size
+    }));
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
@@ -67,12 +73,17 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : SmartLinkSize.Medium;
+  var 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: width,
+      height: width
+    }));
   }
 };
 
@@ -99,18 +110,34 @@ var Icon = function Icon(_ref) {
     url = _ref.url;
   var element = 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, 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]);
   var width = getIconWidth(size);
   var styles = getIconStyles(position, width);
   var 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: width,
+      height: width
+    }
+  }, element) : element);
 };
+var iconWrapperStyle = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 export default Icon;

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

@@ -8,6 +8,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 var sizeToButtonSpacing = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, SmartLinkSize.Small, 'none'), SmartLinkSize.Medium, 'compact'), SmartLinkSize.Large, 'compact'), SmartLinkSize.XLarge, 'default');
 export var getFormattedMessage = function getFormattedMessage(message) {
@@ -54,7 +55,9 @@ export var getIconSizeStyles = function getIconSizeStyles(width) {
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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);
 };
-export var getIconWidth = function getIconWidth(size) {
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+export var getIconWidthOld = function getIconWidthOld(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '2rem';
@@ -67,6 +70,24 @@ export var getIconWidth = function getIconWidth(size) {
       return '.75rem';
   }
 };
+
+// TODO Rename to getIconWidth when cleaning platform-smart-card-icon-migration
+export var getIconWidthNew = function 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 var getIconWidth = function getIconWidth(size) {
+  return fg('platform-smart-card-icon-migration') ? getIconWidthNew(size) : getIconWidthOld(size);
+};
 export var importIcon = function importIcon(importFn) {
   return Loadable({
     loader: function loader() {

package/dist/esm/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';
@@ -22,6 +25,7 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
     items: actions,
     visibleButtonsNum: 2
   });
+  var 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", {
@@ -40,18 +44,29 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
     }), jsx("span", {
       css: getTitleStyles(lineHeightRem),
       "data-testid": "".concat(testId, "-title")
-    }, jsx(LoadingSkeleton, {
+    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
+      height: "".concat(lineHeightRem, "rem")
+    }) : jsx(LoadingSkeletonOld, {
       height: lineHeightRem
-    })), actionGroup), jsx(LoadingSkeleton, {
+    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem * 3, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(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/esm/view/LinkUrl/index.js

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

package/dist/esm/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -2,11 +2,11 @@ import React, { useCallback, useRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { fg } from "@atlaskit/platform-feature-flags";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
-import RelatedLinksBaseModalOld from "./RelatedLinksBaseModalOld";
+import RelatedLinksBaseModalOld from './RelatedLinksBaseModalOld';
 var fixedWidth = 'small'; // pre-defined 400px by Atlaskit
 
 var boxStyles = xcss({

package/dist/esm/view/RelatedLinksModal/views/errored/error-svg/index.js

@@ -3,8 +3,8 @@ 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 { ErrorSVGOld } from "./ErrorSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ErrorSVGOld } from './ErrorSvgOld';
 var errorStyles = null;
 var ErrorSVGNew = function ErrorSVGNew(props) {
   var id = 'related-links-error-svg';

package/dist/esm/view/RelatedLinksModal/views/resolved/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { fg } from "@atlaskit/platform-feature-flags";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Stack } from '@atlaskit/primitives';
 import { messages } from '../../../../messages';
 import RelatedLinksList from '../../components/related-links-list';

package/dist/esm/view/RelatedLinksModal/views/unavailable/unavailable-svg/index.js

@@ -3,8 +3,8 @@ 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 { UnavailableSVGOld } from "./UnavailableSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { UnavailableSVGOld } from './UnavailableSvgOld';
 var unavailableStyles = null;
 var UnavailableSVGNew = function UnavailableSVGNew(props) {
   var id = 'related-links-unavailable-svg';

package/dist/types/common/ui/icons/angle-brackets-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-declare const AngleBracketsIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AngleBracketsIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AngleBracketsIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AngleBracketsIconWithColor;

package/dist/types/common/ui/icons/audio-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AudioIcon from '@atlaskit/icon/core/audio';
-declare const AudioIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AudioIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AudioIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AudioIconWithColor;

package/dist/types/common/ui/icons/blog-icon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const BlogIconWithColor: import("react").FC<{
+    label: string;
+    testId?: string | undefined;
+} & {
+    size?: import("../../..").SmartLinkSize | undefined;
+}>;
+export default BlogIconWithColor;

package/dist/types/common/ui/icons/chart-bar-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-declare const ChartBarIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ChartBarIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ChartBarIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ChartBarIconWithColor;

package/dist/types/common/ui/icons/file-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import FileIcon from '@atlaskit/icon/core/file';
-declare const FileIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof FileIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const FileIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default FileIconWithColor;

package/dist/types/common/ui/icons/folder-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import FolderClosedIcon from '@atlaskit/icon/core/folder-closed';
-declare const FolderClosedIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof FolderClosedIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const FolderClosedIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default FolderClosedIconWithColor;

package/dist/types/common/ui/icons/image-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ImageIcon from '@atlaskit/icon/core/image';
-declare const ImageIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ImageIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ImageIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ImageIconWithColor;

package/dist/types/common/ui/icons/list-bullet-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-declare const ListBulletedIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ListBulletedIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ListBulletedIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ListBulletedIconWithColor;

package/dist/types/common/ui/icons/page-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import PageIcon from '@atlaskit/icon/core/page';
-declare const PageIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof PageIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const PageIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default PageIconWithColor;

package/dist/types/common/ui/icons/types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { IconTile } from '@atlaskit/icon';
+import { SmartLinkSize } from '../../../constants';
+export type AtlaskitIconTileProps = Omit<ComponentPropsWithoutRef<typeof IconTile>, 'appearance' | 'icon' | 'size'> & {
+    size?: SmartLinkSize;
+};

package/dist/types/common/ui/icons/utils.d.ts

@@ -0,0 +1,15 @@
+import React, { type ComponentPropsWithoutRef, type ComponentType } from 'react';
+import { IconTile } from '@atlaskit/icon';
+import { SmartLinkSize } from '../../../constants';
+import type { AtlaskitIconTileProps } from './types';
+export declare const transformSmartLinkSizeToIconTileSize: (size?: SmartLinkSize) => "24" | "16";
+type IconProps = {
+    label: string;
+    testId?: string;
+};
+export declare const renderIconPerSize: (IconSmall: ComponentType<IconProps>, IconLarge: ComponentType<IconProps>) => React.FC<IconProps & {
+    size?: SmartLinkSize;
+}>;
+type IconTileProps = ComponentPropsWithoutRef<typeof IconTile>;
+export declare const renderIconTile: (Icon: IconTileProps['icon'], appearance: IconTileProps['appearance'], LegacyIcon: ComponentType<Omit<AtlaskitIconTileProps, 'size'>>) => React.FC<AtlaskitIconTileProps>;
+export {};

package/dist/types/common/ui/icons/video-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import VideoIcon from '@atlaskit/icon/core/video';
-declare const VideoIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof VideoIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const VideoIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default VideoIconWithColor;

package/dist/types/utils/index.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import { type ActiveThemeState } from '@atlaskit/tokens';
-import { IconType } from '../constants';
+import { IconType, SmartLinkSize } from '../constants';
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
 /**
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
@@ -16,7 +18,10 @@ export declare const isSpecialKey: (event: React.MouseEvent | React.KeyboardEven
 export declare const isSpecialClick: (event: React.MouseEvent) => boolean;
 export declare const getIconForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getLabelForFileType: (fileMimeType: string) => React.ReactNode | undefined;
-export declare const getLazyIcons: () => Partial<Record<IconType, () => Promise<unknown>>>;
+export declare const getLazyIcons: () => Partial<Record<IconType, {
+    default: () => Promise<unknown>;
+    large?: () => Promise<unknown>;
+}>>;
 export declare const getIframeSandboxAttribute: (isTrusted: boolean) => "allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" | undefined;
 export declare const handleOnClick: (handler: Function) => (e: React.BaseSyntheticEvent) => void;
 export declare const isIntersectionObserverSupported: () => boolean;
@@ -30,3 +35,4 @@ export declare const openUrl: (url?: string) => Promise<void>;
  * @param themeState
  */
 export declare const getPreviewUrlWithTheme: (previewUrl: string, themeState: Partial<ActiveThemeState>) => string;
+export declare const isIconSizeLarge: (size?: SmartLinkSize) => boolean | undefined;

package/dist/types/view/FlexibleCard/components/blocks/metadata-block/MetadataBlockOld.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type MetadataBlockProps } from './types';
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+declare const MetadataBlockOld: ({ maxLines, status, testId, primary, secondary, ...blockProps }: MetadataBlockProps) => JSX.Element | null;
+export default MetadataBlockOld;

package/dist/types/view/FlexibleCard/components/blocks/metadata-block/index.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import { type MetadataBlockProps } from './types';
-/**
- * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
- * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
- * @public
- * @param {MetadataBlockProps} MetadataBlockProps
- * @see Block
- */
-declare const MetadataBlock: ({ maxLines, status, testId, primary, secondary, ...blockProps }: MetadataBlockProps) => JSX.Element | null;
-export default MetadataBlock;
+declare const MetadataBlockExported: (props: MetadataBlockProps) => JSX.Element;
+export default MetadataBlockExported;

package/dist/types/view/FlexibleCard/components/blocks/title-block/resolved/index.d.ts

@@ -2,9 +2,11 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
+import type { ComponentPropsWithoutRef } from 'react';
+import Block from '../../block';
 import { type TitleBlockViewProps } from '../types';
 import TitleBlockResolvedViewOld from './TitleBlockResolvedViewOld';
+export declare const BlockFeatureGated: ({ className, ...props }: ComponentPropsWithoutRef<typeof Block>) => JSX.Element;
 /**
  * This renders a fully resolved TitleBlock.
  * This should render when a Smart Link returns a valid response.

package/dist/types/view/FlexibleCard/components/common/atlaskit-icon/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type AtlaskitIconProps } from './types';
-declare const AtlaskitIcon: ({ icon, label, testId }: AtlaskitIconProps) => JSX.Element | null;
+declare const AtlaskitIcon: ({ icon, label, testId, size }: AtlaskitIconProps) => JSX.Element | null;
 export default AtlaskitIcon;

package/dist/types/view/FlexibleCard/components/common/atlaskit-icon/types.d.ts

@@ -1,6 +1,7 @@
-import { type IconType } from '../../../../../constants';
+import { type IconType, SmartLinkSize } from '../../../../../constants';
 export type AtlaskitIconProps = {
     icon: IconType;
     label?: string;
     testId?: string;
+    size?: SmartLinkSize;
 };

package/dist/types/view/FlexibleCard/components/common/image-icon/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type ImageIconProps } from './types';
-declare const ImageIcon: ({ defaultIcon, testId, url, onError, onLoad }: ImageIconProps) => JSX.Element;
+declare const ImageIcon: ({ defaultIcon, testId, url, width, height, onError, onLoad, }: ImageIconProps) => JSX.Element;
 export default ImageIcon;

package/dist/types/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -3,6 +3,8 @@ export type ImageIconProps = {
     defaultIcon?: React.ReactNode;
     testId?: string;
     url: string;
+    width?: string;
+    height?: string;
     onError?: () => void;
     onLoad?: () => void;
 };

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/LoadingSkeletonOld.d.ts

@@ -3,6 +3,6 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-import { type LoadingSkeletonProps } from './types';
-declare const LoadingSkeletonOld: ({ testId, width, height }: LoadingSkeletonProps) => jsx.JSX.Element;
+import { type LoadingSkeletonPropsOld } from './types';
+declare const LoadingSkeletonOld: ({ testId, width, height }: LoadingSkeletonPropsOld) => jsx.JSX.Element;
 export default LoadingSkeletonOld;

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-import { type LoadingSkeletonProps } from './types';
-declare const LoadingSkeleton: (props: LoadingSkeletonProps) => JSX.Element;
-export default LoadingSkeleton;
+import type { LoadingSkeletonPropsNew, LoadingSkeletonPropsOld } from './types';
+declare const LoadingSkeletonNew: ({ testId, width, height }: LoadingSkeletonPropsNew) => JSX.Element;
+declare const LoadingSkeletonOld: (props: LoadingSkeletonPropsOld) => JSX.Element;
+export { LoadingSkeletonOld, LoadingSkeletonNew };

package/dist/types/view/FlexibleCard/components/common/loading-skeleton/types.d.ts

@@ -1,4 +1,4 @@
-export type LoadingSkeletonProps = {
+export type LoadingSkeletonPropsOld = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered
@@ -14,3 +14,19 @@ export type LoadingSkeletonProps = {
      */
     height?: number;
 };
+export type LoadingSkeletonPropsNew = {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered
+     * code, serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Width of the loading skeleton, defaults to width of the parent element
+     */
+    width?: string;
+    /**
+     * Height of loading skeleton, defaults to height of the parent element
+     */
+    height?: string;
+};

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -12,6 +12,8 @@ export declare const getFormattedMessageAsString: (intl: IntlShape, message: Mes
  * @deprecated remove on FF bandicoots-compiled-migration-smartcard clean up
  */
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
+export declare const getIconWidthOld: (size?: SmartLinkSize) => string;
+export declare const getIconWidthNew: (size?: SmartLinkSize) => string;
 export declare const getIconWidth: (size?: SmartLinkSize) => string;
 export declare const importIcon: (importFn: () => Promise<any>) => any;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;

package/dist/types/view/HoverCard/components/views/resolving/index.d.ts

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
 import { type HoverCardLoadingViewProps } from './types';
 declare const HoverCardLoadingView: ({ titleBlockProps }: HoverCardLoadingViewProps) => jsx.JSX.Element;

package/dist/types-ts4.5/common/ui/icons/angle-brackets-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-declare const AngleBracketsIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AngleBracketsIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AngleBracketsIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AngleBracketsIconWithColor;

package/dist/types-ts4.5/common/ui/icons/audio-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AudioIcon from '@atlaskit/icon/core/audio';
-declare const AudioIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AudioIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AudioIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AudioIconWithColor;

package/dist/types-ts4.5/common/ui/icons/blog-icon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const BlogIconWithColor: import("react").FC<{
+    label: string;
+    testId?: string | undefined;
+} & {
+    size?: import("../../..").SmartLinkSize | undefined;
+}>;
+export default BlogIconWithColor;

package/dist/types-ts4.5/common/ui/icons/chart-bar-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-declare const ChartBarIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ChartBarIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ChartBarIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ChartBarIconWithColor;

package/dist/types-ts4.5/common/ui/icons/file-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import FileIcon from '@atlaskit/icon/core/file';
-declare const FileIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof FileIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const FileIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default FileIconWithColor;