@atlaskit/smart-card 23.4.8 → 23.5.1

package/dist/esm/view/BlockCard/index.js

@@ -1,5 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -13,15 +17,21 @@ import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
 import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
+import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
+import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
+import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import { tokens } from '../../utils/token';
+import { css, jsx } from '@emotion/react';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
+var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
 
   var url = _ref.url,
-      _ref$cardState = _ref.cardState,
-      status = _ref$cardState.status,
-      details = _ref$cardState.details,
+      cardState = _ref.cardState,
       authFlow = _ref.authFlow,
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
@@ -34,7 +44,10 @@ export var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform,
-      analytics = _ref.analytics;
+      analytics = _ref.analytics,
+      enableFlexibleBlockCard = _ref.enableFlexibleBlockCard;
+  var status = cardState.status,
+      details = cardState.details;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
@@ -44,10 +57,62 @@ export var BlockCard = function BlockCard(_ref) {
     extensionKey: getExtensionKey(details)
   };
 
+  if (enableFlexibleBlockCard) {
+    var ui = {
+      hideElevation: true
+    };
+    var flexibleProps = {
+      cardState: cardState,
+      url: url,
+      testId: testId,
+      onError: onError,
+      renderers: renderers,
+      ui: ui
+    };
+
+    switch (status) {
+      case 'pending':
+      case 'resolving':
+      case 'resolved':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleResolvedView, flexibleProps));
+
+      case 'unauthorized':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'forbidden':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'not_found':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+
+      case 'fallback':
+      case 'errored':
+        return jsx("div", {
+          css: flexibleBlockCardElevationStyle
+        }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+          onAuthorize: handleAuthorize
+        })));
+    }
+  }
+
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
+      return jsx(BlockCardResolvingView, {
         testId: testId,
         isSelected: isSelected
       });
@@ -62,7 +127,7 @@ export var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedViewProps, {
+      return jsx(BlockCardResolvedView, _extends({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -78,7 +143,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       var unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
+      return jsx(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -101,7 +166,7 @@ export var BlockCard = function BlockCard(_ref) {
         url: url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/React.createElement(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
+      return jsx(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
         isSelected: isSelected,
         showActions: showActions,
         actions: handleAuthorize ? [ForbiddenAction(handleAuthorize)] : [],
@@ -118,7 +183,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       var notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
+      return jsx(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -135,7 +200,7 @@ export var BlockCard = function BlockCard(_ref) {
       }
 
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/React.createElement(CardLinkView, {
+        return jsx(CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
@@ -143,7 +208,7 @@ export var BlockCard = function BlockCard(_ref) {
         });
       }
 
-      return /*#__PURE__*/React.createElement(BlockCardErroredView, {
+      return jsx(BlockCardErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,

package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -5,7 +5,7 @@ import { messages } from '../../../../messages';
 import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { RetryAction } from '../../actions/flexible/RetryAction';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 import Text from '../../../FlexibleCard/components/elements/text';
@@ -48,7 +48,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     message: {
       descriptor: messages.could_not_load_link
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -6,7 +6,7 @@ import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
 
@@ -50,7 +50,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     message: {
       descriptor: messages.invalid_permissions_description
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -5,7 +5,7 @@ import { messages } from '../../../../messages';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 
@@ -46,7 +46,7 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
       descriptor: messages.not_found_description
     },
     testId: testId
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     status: status
   })));
 };

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
+import { ActionName, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
+
+/**
+ * This view represents a Block card that has an 'Resolved' status.
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
+  var cardState = _ref.cardState,
+      onClick = _ref.onClick,
+      onError = _ref.onError,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
+      ui = _ref.ui,
+      url = _ref.url;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPreviewBlockErrored = _useState2[0],
+      setIsPreviewBlockErrored = _useState2[1];
+
+  useEffect(function () {
+    setIsPreviewBlockErrored(false);
+  }, [url, cardState]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: ui,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, {
+    position: SmartLinkPosition.Center,
+    metadata: [{
+      name: ElementName.AuthorGroup
+    }, {
+      name: ElementName.Priority
+    }, {
+      name: ElementName.State
+    }],
+    hideRetry: true
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: [{
+      name: ElementName.ModifiedBy
+    }, {
+      name: ElementName.ModifiedOn
+    }],
+    secondary: [{
+      name: ElementName.AttachmentCount
+    }, {
+      name: ElementName.CommentCount
+    }, {
+      name: ElementName.ReactCount
+    }, {
+      name: ElementName.SubscriberCount
+    }, {
+      name: ElementName.ViewCount
+    }, {
+      name: ElementName.VoteCount
+    }, {
+      name: ElementName.DueOn
+    }],
+    maxLines: 1
+  }), /*#__PURE__*/React.createElement(MetadataBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true,
+    onError: function onError() {
+      setIsPreviewBlockErrored(true);
+    }
+  }) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: [{
+      name: ActionName.PreviewAction
+    }, {
+      name: ActionName.ViewAction
+    }, {
+      name: ActionName.DownloadAction
+    }]
+  }));
+};
+
+export default FlexibleResolvedView;

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -4,7 +4,7 @@ import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
-import Footer from '../../components/flexible/footer';
+import BlockCardFooter from '../../components/flexible/footer';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 
 /**
@@ -12,7 +12,7 @@ import { CustomBlock } from '../../../FlexibleCard/components/blocks';
  * It should have a "Connect" button that will allow a user to connect their account and view the block card.
  *
  * @see SmartLinkStatus
- * @see UnauthorisedViewProps
+ * @see FlexibleCardProps
  */
 var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   var cardState = _ref.cardState,
@@ -47,7 +47,7 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
         context: providerName
       }
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(Footer, {
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

package/dist/esm/view/CardWithUrl/component.js

@@ -54,8 +54,9 @@ export function CardWithUrlContent(_ref) {
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
     showHoverPreview = Boolean(showHoverPreviewFlag);
-  } // Setup UI handlers.
+  }
 
+  var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
 
   var handleClick = useCallback(function (event) {
     var clickUrl = getClickUrl(url, state.details);
@@ -188,7 +189,8 @@ export function CardWithUrlContent(_ref) {
         onError: onError,
         testId: testId,
         showActions: showActions,
-        platform: platform
+        platform: platform,
+        enableFlexibleBlockCard: enableFlexibleBlockCardFlag
       });
 
     case 'embed':

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["status", "testId", "onError"];
+var _excluded = ["status", "testId"];
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
-import Block from '../block';
-import { Preview } from '../../elements';
+import PreviewBlockResolvedView from './resolved';
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
  * @public
@@ -17,17 +19,14 @@ var PreviewBlock = function PreviewBlock(_ref) {
       status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
-      onError = _ref.onError,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   if (status !== SmartLinkStatus.Resolved) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(Preview, {
-    onError: onError
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
+    testId: testId
   }));
 };
 

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

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { MediaPlacement } from '../../../../../../constants';
+import Block from '../../block';
+import { Preview } from '../../../elements';
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+
+var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
+  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+    var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
+  }
+
+  if (ignoreContainerPadding) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: calc(var(--container-gap-left) * -1);\n      margin-right: calc(var(--container-gap-right) * -1);\n      &:first-of-type {\n        margin-top: calc(var(--container-padding) * -1);\n      }\n      &:last-of-type {\n        margin-bottom: calc(var(--container-padding) * -1);\n      }\n    "])));
+  }
+};
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+
+
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+  var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
+      ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
+      onError = _ref.onError,
+      overrideCss = _ref.overrideCss,
+      placement = _ref.placement,
+      testId = _ref.testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(overrideCss),
+      _useState2 = _slicedToArray(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
+  var updateStyles = useCallback(function () {
+    setStyles(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  useEffect(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  var handleOnLoad = useCallback(function () {
+    updateStyles();
+  }, [updateStyles]);
+  var handleOnError = useCallback(function () {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return jsx(Block, _extends({}, blockProps, {
+    overrideCss: styles,
+    testId: "".concat(testId, "-resolved-view")
+  }), jsx(Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad
+  }));
+};
+
+export default PreviewBlockResolvedView;

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

@@ -8,7 +8,8 @@ var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
       url = _ref.url,
-      onError = _ref.onError;
+      onError = _ref.onError,
+      onLoad = _ref.onLoad;
   return jsx(ImageLoader, {
     src: url,
     loading: jsx(LoadingSkeleton, {
@@ -19,7 +20,8 @@ var ImageIcon = function ImageIcon(_ref) {
       "data-testid": "".concat(testId, "-image")
     }),
     errored: defaultIcon,
-    onError: onError
+    onError: onError,
+    onLoad: onLoad
   });
 };
 

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

@@ -1,15 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
 var getGap = function getGap(size) {
@@ -47,8 +48,42 @@ var getPadding = function getPadding(size) {
 };
 
 var clickableContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
-export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+
+var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
+  var previewOnLeft = childrenOptions.previewOnLeft,
+      previewOnRight = childrenOptions.previewOnRight;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+};
+
+var getChildrenOptions = function getChildrenOptions(children, context) {
+  var options = {};
+
+  if (isFlexUiPreviewPresent(context)) {
+    React.Children.map(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (isFlexibleUiPreviewBlock(child)) {
+          var placement = child.props.placement;
+
+          if (placement === MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+
+  return options;
+};
+
+export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
+  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
@@ -133,8 +168,9 @@ var Container = function Container(_ref3) {
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
   var context = useContext(FlexibleUiContext);
+  var childrenOptions = getChildrenOptions(children, context);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -18,6 +20,7 @@ var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
       appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
       name = _ref.name,
+      onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
       text = _ref.text,
       _ref$testId = _ref.testId,
@@ -28,15 +31,19 @@ var Lozenge = function Lozenge(_ref) {
   }
 
   return jsx("span", {
-    css: [styles, overrideCss],
+    css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick: onClick
   }, jsx(AtlaskitLozenge, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
-  }, text));
+  }, text, onClick && jsx(ChevronDownIcon, {
+    label: "action",
+    testId: "".concat(testId, "-action")
+  })));
 };
 
 export default Lozenge;

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -32,6 +32,7 @@ var Media = function Media(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url,
+      onLoad = _ref.onLoad,
       onError = _ref.onError;
 
   if (!type || !url) {
@@ -47,6 +48,7 @@ var Media = function Media(_ref) {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };