@atlaskit/smart-card 34.5.1 → 34.6.0

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

@@ -1,21 +1,26 @@
+/* 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 = void 0;
+exports.default = exports.UnresolvedViewExported = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _utils = require("../utils");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var customBlockStyles = (0, _react2.css)({
-  alignItems: 'flex-start'
-});
+var _UnresolvedViewOld = _interopRequireDefault(require("./UnresolvedViewOld"));
+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 customBlockStyles = null;
+var titleBlockCss = null;
+var footerBlockCss = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -28,7 +33,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     url = _ref.url;
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+  return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
     onAuthorize: onAuthorize,
@@ -38,14 +43,28 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId: testId,
     ui: _utils.FlexibleCardUiOptions,
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
+  }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     hideIcon: !!title,
-    text: title
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
-    overrideCss: customBlockStyles
-  }, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptions, {
+    text: title,
+    status: cardState.status,
+    className: (0, _runtime.ax)(["_zulp1f3t _13mh1pd9"])
+  })), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
+    status: cardState.status,
+    className: (0, _runtime.ax)(["_4cvr1y6m"])
+  }, children), showPreview && /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
+    status: cardState.status
+  })), /*#__PURE__*/React.createElement(_blocks.InternalFooterBlock, {
     actions: actions,
-    testId: "smart-block-card-footer"
-  })));
+    testId: "smart-block-card-footer",
+    status: cardState.status,
+    className: (0, _runtime.ax)(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+  }));
+};
+var UnresolvedViewExported = exports.UnresolvedViewExported = function UnresolvedViewExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(UnresolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_UnresolvedViewOld.default, props);
+  }
 };
-var _default = exports.default = UnresolvedView;
+var _default = exports.default = UnresolvedViewExported;

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockOptions = exports.getSimulatedBetterMetadata = exports.PreviewBlockOptions = exports.FooterBlockOptions = exports.FlexibleCardUiOptions = void 0;
+exports.titleBlockOptionsOld = exports.titleBlockOptions = exports.getSimulatedBetterMetadata = exports.PreviewBlockOptions = exports.FooterBlockOptionsOld = exports.FlexibleCardUiOptions = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../constants");
 var _utils = require("../../../../extractors/flexible/utils");
 var _helpers = require("../../../../state/helpers");
-var _styled = require("../styled");
+var _styledOld = require("../styledOld");
 var baseTopMetadata = [{
   name: _constants.ElementName.ModifiedOn
 }, {
@@ -145,7 +145,13 @@ var FlexibleCardUiOptions = exports.FlexibleCardUiOptions = {
 var titleBlockOptions = exports.titleBlockOptions = {
   anchorTarget: '_self',
   position: _constants.SmartLinkPosition.Center,
-  overrideCss: _styled.titleBlockCss,
+  hideRetry: true,
+  size: _constants.SmartLinkSize.Large
+};
+var titleBlockOptionsOld = exports.titleBlockOptionsOld = {
+  anchorTarget: '_self',
+  position: _constants.SmartLinkPosition.Center,
+  overrideCss: _styledOld.titleBlockCss,
   hideRetry: true,
   size: _constants.SmartLinkSize.Large
 };
@@ -153,6 +159,6 @@ var PreviewBlockOptions = exports.PreviewBlockOptions = {
   placement: _constants.MediaPlacement.Right,
   ignoreContainerPadding: true
 };
-var FooterBlockOptions = exports.FooterBlockOptions = {
-  overrideCss: _styled.footerBlockCss
+var FooterBlockOptionsOld = exports.FooterBlockOptionsOld = {
+  overrideCss: _styledOld.footerBlockCss
 };

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

@@ -0,0 +1,2 @@
+._1g96pd34>div{border-radius:var(--ds-border-radius-200,8px)}
+._1qo3n8v0>div{border:var(--_vzvmm2)}

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;