@atlaskit/smart-card 34.5.2 → 34.6.0

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

@@ -1,24 +1,36 @@
+/* withFlexibleUIBlockCardStyle.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withFlexibleUIBlockCardStyle = void 0;
-var _react = require("@emotion/react");
-var _styled = require("../styled");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+exports.withFlexibleUIBlockCardStyleNew = exports.withFlexibleUIBlockCardStyle = void 0;
+require("./withFlexibleUIBlockCardStyle.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _withFlexibleUIBlockCardStyleOld = require("./withFlexibleUIBlockCardStyleOld");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var flexibleBlockCardStyle = null;
+var withFlexibleUIBlockCardStyleNew = exports.withFlexibleUIBlockCardStyleNew = function withFlexibleUIBlockCardStyleNew(FlexibleBlockCardView) {
+  return function (props) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_1g96pd34 _1qo3n8v0"]),
+      style: {
+        "--_vzvmm2": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")))
+      }
+    }, /*#__PURE__*/React.createElement(FlexibleBlockCardView, props));
+  };
+};
 var withFlexibleUIBlockCardStyle = exports.withFlexibleUIBlockCardStyle = function withFlexibleUIBlockCardStyle(FlexibleBlockCardView) {
   return function (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
-      (0, _react.jsx)("div", {
-        css: _styled.flexibleBlockCardStyle
-      }, (0, _react.jsx)(FlexibleBlockCardView, props))
-    );
+    if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+      return withFlexibleUIBlockCardStyleNew(FlexibleBlockCardView)(props);
+    } else {
+      return (0, _withFlexibleUIBlockCardStyleOld.withFlexibleUIBlockCardStyleOld)(FlexibleBlockCardView)(props);
+    }
   };
 };

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withFlexibleUIBlockCardStyleOld = void 0;
+var _react = require("@emotion/react");
+var _styledOld = require("../styledOld");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var withFlexibleUIBlockCardStyleOld = exports.withFlexibleUIBlockCardStyleOld = function withFlexibleUIBlockCardStyleOld(FlexibleBlockCardView) {
+  return function (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
+      (0, _react.jsx)("div", {
+        css: _styledOld.flexibleBlockCardStyle
+      }, (0, _react.jsx)(FlexibleBlockCardView, props))
+    );
+  };
+};

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss = void 0;
 var _react = require("@emotion/react");
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -61,11 +62,9 @@ var actionCss = exports.actionCss = (0, _react.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/cjs/view/FlexibleCard/components/actions/action/action-icon/ActionIconOld.js

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -35,18 +36,15 @@ var stackItemIconSizeStyles = (0, _utils.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
 var stackItemIconStyles = (0, _react.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
   }
 });
 var newStackItemIconStyles = (0, _react.css)({
   display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0
 });
 var ActionIconOld = function ActionIconOld(_ref) {

package/dist/cjs/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/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -37,7 +37,7 @@ var directionStyles = {
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-var Block = function Block(_ref) {
+var BlockNew = function BlockNew(_ref) {
   var children = _ref.children,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? _constants.SmartLinkDirection.Horizontal : _ref$direction,
@@ -48,24 +48,28 @@ var Block = function Block(_ref) {
     className = _ref.className,
     blockRef = _ref.blockRef,
     onRender = _ref.onRender,
-    onTransitionEnd = _ref.onTransitionEnd;
+    onTransitionEnd = _ref.onTransitionEnd,
+    style = _ref.style;
   (0, _react.useEffect)(function () {
     onRender && onRender();
   }, [onRender]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.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: (0, _runtime.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
   }, (0, _utils.renderChildren)(children, size));
 };
-var Exported = function Exported(props) {
+var Block = function Block(props) {
   if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(Block, props);
+    return /*#__PURE__*/React.createElement(BlockNew, props);
   } else {
     return /*#__PURE__*/React.createElement(_indexOld.default, props);
   }
 };
-var _default = exports.default = Exported;
+var _default = exports.default = Block;

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

@@ -6,10 +6,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ElementGroupNew = void 0;
+exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _ElementGroupOld = _interopRequireDefault(require("./ElementGroupOld"));
@@ -65,7 +66,7 @@ var gapStylesRight = {
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-var ElementGroupNew = exports.ElementGroupNew = function ElementGroupNew(_ref) {
+var ElementGroupNew = function ElementGroupNew(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? _constants.SmartLinkAlignment.Left : _ref$align,
     children = _ref.children,
@@ -89,4 +90,11 @@ var ElementGroupNew = exports.ElementGroupNew = function ElementGroupNew(_ref) {
     className: (0, _runtime.ax)([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === _constants.SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === _constants.SmartLinkDirection.Horizontal && "", _constants.SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
   }, (0, _utils.renderChildren)(children, size));
 };
-var _default = exports.default = _ElementGroupOld.default;
+var ElementGroup = function ElementGroup(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ElementGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ElementGroupOld.default, props);
+  }
+};
+var _default = exports.default = ElementGroup;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../../../constants");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _elements = require("../../../elements");
+var _actionGroup = _interopRequireDefault(require("../../action-group"));
+var _block = _interopRequireDefault(require("../../block"));
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var FooterBlockResolvedViewOld = function FooterBlockResolvedViewOld(props) {
+  var actions = props.actions,
+    testId = props.testId,
+    onActionMenuOpenChange = props.onActionMenuOpenChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+    hideProvider = props.hideProvider;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var hasActions = (0, _react.useMemo)(function () {
+    var _filterActionItems;
+    return ((_filterActionItems = (0, _utils.filterActionItems)(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
+  var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), !hideProvider && /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+    testId: "".concat(testId, "-provider")
+  }), actions && hasActions ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    testId: "smart-element-group-actions",
+    align: _constants.SmartLinkAlignment.Right,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    overrideCss: (0, _utils.getActionGroupStyles)(size),
+    width: _constants.SmartLinkWidth.Flexible
+  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+var _default = exports.default = FooterBlockResolvedViewOld;

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

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

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _elements = require("../../../elements");
@@ -15,8 +20,10 @@ var _actionGroup = _interopRequireDefault(require("../../action-group"));
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _utils = require("../../utils");
+var _FooterBlockResolvedViewOld = _interopRequireDefault(require("./FooterBlockResolvedViewOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var actionGroupStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -36,20 +43,27 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
       });
     }
   }, [onActionMenuOpenChange]);
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), !hideProvider && /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+  }), !hideProvider && /*#__PURE__*/React.createElement(_elements.Provider, {
     testId: "".concat(testId, "-provider")
-  }), actions && hasActions ? /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, {
     testId: "smart-element-group-actions",
     align: _constants.SmartLinkAlignment.Right,
     direction: _constants.SmartLinkDirection.Horizontal,
-    overrideCss: (0, _utils.getActionGroupStyles)(size),
-    width: _constants.SmartLinkWidth.Flexible
-  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([size === _constants.SmartLinkSize.XLarge && "_c71lviql"])
+  }, /*#__PURE__*/React.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);
 };
-var _default = exports.default = FooterBlockResolvedView;
+var FooterBlockResolvedViewExported = function FooterBlockResolvedViewExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FooterBlockResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_FooterBlockResolvedViewOld.default, props);
+  }
+};
+var _default = exports.default = FooterBlockResolvedViewExported;

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

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _block = _interopRequireDefault(require("../block"));
-var _elementGroup = require("../element-group");
+var _elementGroup = _interopRequireDefault(require("../element-group"));
 var _utils = require("../utils");
 var _MetadataBlockOld = _interopRequireDefault(require("./MetadataBlockOld"));
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
@@ -73,12 +73,12 @@ var MetadataBlock = function MetadataBlock(_ref) {
   var maxLinesTotal = getMaxLines(maxLines);
   return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), primaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  }), primaryElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     align: _constants.SmartLinkAlignment.Left,
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible,
     className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
-  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     align: _constants.SmartLinkAlignment.Right,
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible,

package/dist/cjs/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/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -12,32 +12,21 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
 var _block = _interopRequireDefault(require("../../block"));
-var _excluded = ["ignoreContainerPadding", "onError", "className", "placement", "testId", "overrideUrl"];
+var _indexOld = _interopRequireDefault(require("./indexOld"));
+var _excluded = ["ignoreContainerPadding", "onError", "placement", "testId", "overrideUrl", "style", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * 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 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"
-};
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var previewBlockStyleCommon = null;
+var ignoreContainerPaddingStyle = null;
 
 /**
  * Represents a resolved PreviewBlock, which typically contains media or other large format content.
@@ -45,15 +34,47 @@ var previewBlockStyles = {
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+var PreviewBlockResolvedViewNew = function PreviewBlockResolvedViewNew(_ref) {
   var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
     ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
     onError = _ref.onError,
-    className = _ref.className,
     placement = _ref.placement,
     testId = _ref.testId,
     overrideUrl = _ref.overrideUrl,
+    style = _ref.style,
+    className = _ref.className,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // const [styles, setStyles] = useState<SerializedStyles | undefined>(overrideCss);
+  var _useState = (0, _react.useState)(style !== null && style !== void 0 ? style : {}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dynamicStyles = _useState2[0],
+    setDynamicStyles = _useState2[1];
+  var updateStyles = (0, _react.useCallback)(function () {
+    if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
+      var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+      var newStyle = _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
+        position: 'absolute',
+        top: containerPadding,
+        bottom: containerPadding,
+        width: "calc(var(--preview-block-width) - ".concat(containerPadding, ")")
+      }, placement === _constants.MediaPlacement.Left ? {
+        left: containerPadding
+      } : {}), placement === _constants.MediaPlacement.Right ? {
+        right: containerPadding
+      } : {});
+      setDynamicStyles(newStyle);
+    } else {
+      if (ignoreContainerPadding) {
+        setDynamicStyles(_objectSpread({}, style));
+      }
+    }
+  }, [ignoreContainerPadding, placement, style]);
+  (0, _react.useEffect)(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, placement, updateStyles, className]);
+  var handleOnLoad = (0, _react.useCallback)(function () {
+    updateStyles();
+  }, [updateStyles]);
   var handleOnError = (0, _react.useCallback)(function () {
     if (onError) {
       onError();
@@ -61,10 +82,22 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
   }, [onError]);
   return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view"),
-    className: (0, _runtime.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: (0, _runtime.ax)([placement && "_1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr", !placement && ignoreContainerPadding && "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9", className])
   }), /*#__PURE__*/React.createElement(_elements.Preview, {
     onError: handleOnError,
+    onLoad: handleOnLoad,
     overrideUrl: overrideUrl
   }));
 };
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(PreviewBlockResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_indexOld.default, props);
+  }
+};
 var _default = exports.default = PreviewBlockResolvedView;

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

@@ -64,7 +64,7 @@ var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreCont
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+var PreviewBlockResolvedViewOld = function PreviewBlockResolvedViewOld(_ref) {
   var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
     ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
     onError = _ref.onError,
@@ -101,4 +101,4 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     overrideUrl: overrideUrl
   }));
 };
-var _default = exports.default = PreviewBlockResolvedView;
+var _default = exports.default = PreviewBlockResolvedViewOld;

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

@@ -70,7 +70,7 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+var TitleBlockErroredViewOld = function TitleBlockErroredViewOld(_ref) {
   var actionGroup = _ref.actionGroup,
     retry = _ref.retry,
     position = _ref.position,
@@ -105,4 +105,4 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     values: values
   })))), actionGroup);
 };
-var _default = exports.default = TitleBlockErroredView;
+var _default = exports.default = TitleBlockErroredViewOld;

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

@@ -1,18 +1,15 @@
-/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TitleBlockErroredViewNew = void 0;
-require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
@@ -20,8 +17,6 @@ var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _TitleBlockErroredViewOld = _interopRequireDefault(require("./TitleBlockErroredViewOld"));
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Represents an Errored TitleBlock view.
  * This will render when a Smart Link did not successfully resolve.
@@ -29,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-var TitleBlockErroredViewNew = exports.TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
+var TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
   var actionGroup = _ref.actionGroup,
     retry = _ref.retry,
     position = _ref.position,
@@ -43,22 +38,27 @@ var TitleBlockErroredViewNew = exports.TitleBlockErroredViewNew = function Title
     onClick = _ref2.onClick,
     values = _ref2.values;
   var hasAction = onClick !== undefined;
-  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-errored-view"),
-    className: (0, _runtime.ax)(["_zulpu2gc"])
-  }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, {
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), !hideIcon && /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
     overrideIcon: icon,
     position: position
-  }), title, descriptor && /*#__PURE__*/React.createElement(_elementGroup.default, {
+  }), title, descriptor && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, /*#__PURE__*/React.createElement(_primitives.Box, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     onClick: onClick,
     testId: "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
-  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values
   })))), actionGroup);
 };
-var _default = exports.default = _TitleBlockErroredViewOld.default;
-var titleBlockGapStyle = null;
+var TitleBlockErroredView = function TitleBlockErroredView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(TitleBlockErroredViewNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_TitleBlockErroredViewOld.default, props);
+  }
+};
+var _default = exports.default = TitleBlockErroredView;