@atlaskit/smart-card 34.5.2 → 34.6.0

package/dist/es2019/view/BlockCard/views/unresolved-view/UnresolvedViewOld.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+import FlexibleCard from '../../../FlexibleCard';
+import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
+import { FlexibleCardUiOptions, FooterBlockOptionsOld, PreviewBlockOptions, titleBlockOptionsOld } from '../utils';
+const customBlockStyles = css({
+  alignItems: 'flex-start'
+});
+const UnresolvedViewOld = ({
+  actions,
+  cardState,
+  children,
+  onAuthorize,
+  onClick,
+  onError,
+  showPreview = false,
+  testId,
+  title,
+  url
+}) => /*#__PURE__*/React.createElement(FlexibleCard, {
+  appearance: "block",
+  cardState: cardState,
+  onAuthorize: onAuthorize,
+  onClick: onClick,
+  onError: onError,
+  origin: "smartLinkCard",
+  testId: testId,
+  ui: FlexibleCardUiOptions,
+  url: url
+}, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptionsOld, {
+  hideIcon: !!title,
+  text: title
+})), /*#__PURE__*/React.createElement(CustomBlock, {
+  overrideCss: customBlockStyles
+}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptionsOld, {
+  actions: actions,
+  testId: "smart-block-card-footer"
+})));
+export default UnresolvedViewOld;

package/dist/es2019/view/BlockCard/views/unresolved-view/index.compiled.css

@@ -0,0 +1,5 @@
+
+._zulp1f3t{gap:var(--ds-space-100,.5em)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1k8s{height:1.5rem}
+._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}

package/dist/es2019/view/BlockCard/views/unresolved-view/index.js

@@ -1,14 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import FlexibleCard from '../../../FlexibleCard';
 import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
-import { FlexibleCardUiOptions, FooterBlockOptions, PreviewBlockOptions, titleBlockOptions } from '../utils';
-const customBlockStyles = css({
-  alignItems: 'flex-start'
-});
+import { FlexibleCardUiOptions, PreviewBlockOptions, titleBlockOptions } from '../utils';
+import UnresolvedViewOld from './UnresolvedViewOld';
+const customBlockStyles = null;
+const titleBlockCss = null;
+const footerBlockCss = null;
 const UnresolvedView = ({
   actions,
   cardState,
@@ -32,11 +34,25 @@ const UnresolvedView = ({
   url: url
 }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
   hideIcon: !!title,
-  text: title
+  text: title,
+  status: cardState.status,
+  className: ax(["_zulp1f3t _13mh1pd9"])
 })), /*#__PURE__*/React.createElement(CustomBlock, {
-  overrideCss: customBlockStyles
-}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, FooterBlockOptions, {
+  status: cardState.status,
+  className: ax(["_4cvr1y6m"])
+}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
+  status: cardState.status
+})), /*#__PURE__*/React.createElement(InternalFooterBlock, {
   actions: actions,
-  testId: "smart-block-card-footer"
-})));
-export default UnresolvedView;
+  testId: "smart-block-card-footer",
+  status: cardState.status,
+  className: ax(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+}));
+export const UnresolvedViewExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(UnresolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(UnresolvedViewOld, props);
+  }
+};
+export default UnresolvedViewExported;

package/dist/es2019/view/BlockCard/views/utils/index.js

@@ -2,7 +2,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
 import { extractOwnedBy } from '../../../../extractors/flexible/utils';
 import { getExtensionKey } from '../../../../state/helpers';
-import { footerBlockCss, titleBlockCss } from '../styled';
+import { footerBlockCss, titleBlockCss } from '../styledOld';
 const baseTopMetadata = [{
   name: ElementName.ModifiedOn
 }, {
@@ -137,6 +137,12 @@ export const FlexibleCardUiOptions = {
   hideElevation: true
 };
 export const titleBlockOptions = {
+  anchorTarget: '_self',
+  position: SmartLinkPosition.Center,
+  hideRetry: true,
+  size: SmartLinkSize.Large
+};
+export const titleBlockOptionsOld = {
   anchorTarget: '_self',
   position: SmartLinkPosition.Center,
   overrideCss: titleBlockCss,
@@ -147,6 +153,6 @@ export const PreviewBlockOptions = {
   placement: MediaPlacement.Right,
   ignoreContainerPadding: true
 };
-export const FooterBlockOptions = {
+export const FooterBlockOptionsOld = {
   overrideCss: footerBlockCss
 };

package/dist/es2019/view/BlockCard/views/utils/withFlexibleUIBlockCardStyle.compiled.css

@@ -0,0 +1,2 @@
+._1g96pd34>div{border-radius:var(--ds-border-radius-200,8px)}
+._1qo3h6cr>div{border:1px solid var(--ds-border,#dfe1e6)}

package/dist/es2019/view/BlockCard/views/utils/withFlexibleUIBlockCardStyle.js

@@ -1,15 +1,20 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { flexibleBlockCardStyle } from '../styled';
+/* withFlexibleUIBlockCardStyle.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./withFlexibleUIBlockCardStyle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N40 } from '@atlaskit/theme/colors';
+import { withFlexibleUIBlockCardStyleOld } from './withFlexibleUIBlockCardStyleOld';
+const flexibleBlockCardStyle = null;
+export const withFlexibleUIBlockCardStyleNew = FlexibleBlockCardView => props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1g96pd34 _1qo3h6cr"])
+  }, /*#__PURE__*/React.createElement(FlexibleBlockCardView, props));
+};
 export const withFlexibleUIBlockCardStyle = FlexibleBlockCardView => props => {
-  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", {
-      css: flexibleBlockCardStyle
-    }, jsx(FlexibleBlockCardView, props))
-  );
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return withFlexibleUIBlockCardStyleNew(FlexibleBlockCardView)(props);
+  } else {
+    return withFlexibleUIBlockCardStyleOld(FlexibleBlockCardView)(props);
+  }
 };

package/dist/es2019/view/BlockCard/views/utils/withFlexibleUIBlockCardStyleOld.js

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { flexibleBlockCardStyle } from '../styledOld';
+export const withFlexibleUIBlockCardStyleOld = FlexibleBlockCardView => props => {
+  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", {
+      css: flexibleBlockCardStyle
+    }, jsx(FlexibleBlockCardView, props))
+  );
+};

package/dist/es2019/view/EmbedModal/components/link-info/styledOld.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -54,11 +55,9 @@ export const actionCss = css({
   display: 'flex',
   flex: '0 0 auto',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: height,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: height
   },
   '@media only screen and (max-width: 980px)': {

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/ActionIconOld.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -26,18 +27,15 @@ const stackItemIconSizeStyles = getIconSizeStyles('20px');
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 const stackItemIconStyles = css(stackItemIconSizeStyles, {
   display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: "var(--ds-space-025, 2px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span,svg,img': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0
   }
 });
 const newStackItemIconStyles = css({
   display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0
 });
 const ActionIconOld = ({

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

@@ -31,4 +31,5 @@
 ._syaz1kw7{color:inherit}
 ._te17glyw{-ms-user-select:none}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz41j6v{line-height:1rem}
 ._ytq1bjq5 [data-smart-element=SourceBranch]+[data-smart-element=TargetBranch]:before{content:"→"}

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

@@ -27,7 +27,7 @@ const directionStyles = {
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-const Block = ({
+const BlockNew = ({
   children,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
@@ -35,25 +35,29 @@ const Block = ({
   className,
   blockRef,
   onRender,
-  onTransitionEnd
+  onTransitionEnd,
+  style
 }) => {
   useEffect(() => {
     onRender && onRender();
   }, [onRender]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
+    className: ax(["_1reo15vq _18m915vq _4cvr1h6o _vwz41j6v _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
     "data-smart-block": true,
     "data-testid": testId,
     onTransitionEnd: onTransitionEnd,
     ref: blockRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style
   }, renderChildren(children, size));
 };
-const Exported = props => {
+const Block = props => {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(Block, props);
+    return /*#__PURE__*/React.createElement(BlockNew, props);
   } else {
     return /*#__PURE__*/React.createElement(BlockOld, props);
   }
 };
-export default Exported;
+export default Block;

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -2,6 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { renderChildren } from '../utils';
 import ElementGroupOld from './ElementGroupOld';
@@ -74,5 +75,11 @@ const ElementGroupNew = ({
     className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && "", SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
   }, renderChildren(children, size));
 };
-export default ElementGroupOld;
-export { ElementGroupNew };
+const ElementGroup = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ElementGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ElementGroupOld, props);
+  }
+};
+export default ElementGroup;

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/FooterBlockResolvedViewOld.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { Provider } from '../../../elements';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems, getActionGroupStyles } from '../../utils';
+const FooterBlockResolvedViewOld = props => {
+  const {
+    actions,
+    testId,
+    onActionMenuOpenChange,
+    size = SmartLinkSize.Medium,
+    hideProvider
+  } = props;
+  const context = useFlexibleUiContext();
+  const hasActions = useMemo(() => {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), !hideProvider && /*#__PURE__*/React.createElement(Provider, {
+    testId: `${testId}-provider`
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+export default FooterBlockResolvedViewOld;

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css

@@ -0,0 +1 @@
+._c71lviql{max-height:2rem}

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

@@ -1,12 +1,19 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
 import { Provider } from '../../../elements';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems, getActionGroupStyles } from '../../utils';
+import { filterActionItems } from '../../utils';
+import FooterBlockResolvedViewOld from './FooterBlockResolvedViewOld';
+const actionGroupStyles = null;
 const FooterBlockResolvedView = props => {
   const {
     actions,
@@ -35,12 +42,19 @@ const FooterBlockResolvedView = props => {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
-    overrideCss: getActionGroupStyles(size),
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && "_c71lviql"])
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);
 };
-export default FooterBlockResolvedView;
+const FooterBlockResolvedViewExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FooterBlockResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(FooterBlockResolvedViewOld, props);
+  }
+};
+export default FooterBlockResolvedViewExported;

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

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
-import { ElementGroupNew as ElementGroup } from '../element-group';
+import ElementGroup from '../element-group';
 import { renderElementItems } from '../utils';
 import MetadataBlockOld from './MetadataBlockOld';
 const DEFAULT_MAX_LINES = 2;

package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css

@@ -1,15 +1,9 @@
 ._10aa1osq [data-smart-element-media=image]{width:100%}
-._154iidpf{top:0}
 ._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
-._1bsb795p{width:calc(var(--preview-block-width))}
-._1ltvidpf{left:0}
 ._1t26n7od [data-smart-element-media=image]{aspect-ratio:unset}
-._1xi2idpf{right:0}
 ._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
-._94n5idpf{bottom:0}
 ._dmhj1ya9:last-of-type{margin-bottom:calc(var(--container-padding)*-1)}
 ._e0oi1ya9:first-of-type{margin-top:calc(var(--container-padding)*-1)}
-._kqswstnw{position:absolute}
 ._mr051dfr [data-smart-element-media=image]{object-fit:cover}
 ._rjuj1osq [data-smart-element-media=image]{height:100%}
 ._ze72n7od [data-smart-element-media=image]{padding-top:unset}

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

@@ -3,29 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MediaPlacement } from '../../../../../../constants';
 import { Preview } from '../../../elements';
 import Block from '../../block';
-/**
- * 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
- */
-const previewBlockStyles = {
-  left: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1ltvidpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
-  right: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1xi2idpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
-  ignoreContainerPadding: "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9"
-};
+import PreviewBlockResolvedViewOld from './indexOld';
+const previewBlockStyleCommon = null;
+const ignoreContainerPaddingStyle = null;
 
 /**
  * Represents a resolved PreviewBlock, which typically contains media or other large format content.
@@ -33,15 +18,49 @@ const previewBlockStyles = {
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-const PreviewBlockResolvedView = ({
+const PreviewBlockResolvedViewNew = ({
   ignoreContainerPadding = false,
   onError,
-  className,
   placement,
   testId,
   overrideUrl,
+  style,
+  className,
   ...blockProps
 }) => {
+  // const [styles, setStyles] = useState<SerializedStyles | undefined>(overrideCss);
+  const [dynamicStyles, setDynamicStyles] = useState(style !== null && style !== void 0 ? style : {});
+  const updateStyles = useCallback(() => {
+    if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+      const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+      const newStyle = {
+        ...style,
+        position: 'absolute',
+        top: containerPadding,
+        bottom: containerPadding,
+        width: `calc(var(--preview-block-width) - ${containerPadding})`,
+        ...(placement === MediaPlacement.Left ? {
+          left: containerPadding
+        } : {}),
+        ...(placement === MediaPlacement.Right ? {
+          right: containerPadding
+        } : {})
+      };
+      setDynamicStyles(newStyle);
+    } else {
+      if (ignoreContainerPadding) {
+        setDynamicStyles({
+          ...style
+        });
+      }
+    }
+  }, [ignoreContainerPadding, placement, style]);
+  useEffect(() => {
+    updateStyles();
+  }, [ignoreContainerPadding, placement, updateStyles, className]);
+  const handleOnLoad = useCallback(() => {
+    updateStyles();
+  }, [updateStyles]);
   const handleOnError = useCallback(() => {
     if (onError) {
       onError();
@@ -49,10 +68,22 @@ const PreviewBlockResolvedView = ({
   }, [onError]);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`,
-    className: ax([placement && previewBlockStyles[placement], !placement && ignoreContainerPadding && previewBlockStyles.ignoreContainerPadding])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: dynamicStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([placement && "_1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr", !placement && ignoreContainerPadding && "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9", className])
   }), /*#__PURE__*/React.createElement(Preview, {
     onError: handleOnError,
+    onLoad: handleOnLoad,
     overrideUrl: overrideUrl
   }));
 };
+const PreviewBlockResolvedView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(PreviewBlockResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(PreviewBlockResolvedViewOld, props);
+  }
+};
 export default PreviewBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js

@@ -69,7 +69,7 @@ const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-const PreviewBlockResolvedView = ({
+const PreviewBlockResolvedViewOld = ({
   ignoreContainerPadding = false,
   onError,
   overrideCss,
@@ -103,4 +103,4 @@ const PreviewBlockResolvedView = ({
     overrideUrl: overrideUrl
   }));
 };
-export default PreviewBlockResolvedView;
+export default PreviewBlockResolvedViewOld;

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

@@ -61,7 +61,7 @@ const getMessageStyles = (size, hasAction) => {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-const TitleBlockErroredView = ({
+const TitleBlockErroredViewOld = ({
   actionGroup,
   retry,
   position,
@@ -99,4 +99,4 @@ const TitleBlockErroredView = ({
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredView;
+export default TitleBlockErroredViewOld;

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

@@ -1,9 +1,7 @@
-/* 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 React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
@@ -35,8 +33,7 @@ const TitleBlockErroredViewNew = ({
   } = retry || {};
   const hasAction = onClick !== undefined;
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-errored-view`,
-    className: ax(["_zulpu2gc"])
+    testId: `${testId}-errored-view`
   }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
     position: position
@@ -51,6 +48,11 @@ const TitleBlockErroredViewNew = ({
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredViewOld;
-export { TitleBlockErroredViewNew };
-const titleBlockGapStyle = null;
+const TitleBlockErroredView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockErroredViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TitleBlockErroredViewOld, props);
+  }
+};
+export default TitleBlockErroredView;