@atlaskit/smart-card 34.4.0 → 34.5.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 34.5.0
+
+### Minor Changes
+
+- [#99391](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99391)
+  [`0ef7aea2187eb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ef7aea2187eb) -
+  [ux] Allow shift key to be considered a special key to allow Chromium-based browsers behave
+  natively when users click on smart links while holding the shift key.
+
 ## 34.4.0
 
 ### Minor Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.4.0"
+  packageVersion: "34.5.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/utils/index.js

@@ -29,13 +29,15 @@ var isIframe = exports.isIframe = function isIframe() {
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
  * in which case typically only a standard clickthrough will occur, this is likely a small portion of events
  */
 var isSpecialKey = exports.isSpecialKey = function isSpecialKey(event) {
-  return event.metaKey || event.ctrlKey;
+  return (0, _platformFeatureFlags.fg)('platform-smart-card-shift-key') ? event.metaKey || event.ctrlKey || event.shiftKey : event.metaKey || event.ctrlKey;
 };
 var isSpecialClick = exports.isSpecialClick = function isSpecialClick(event) {
   return event.button === 1;

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

@@ -40,22 +40,22 @@ var positionStyle = {
 };
 var horizontalStyleBase = null;
 var horizontalStyleByHeight = {
-  'xlarge': "_1e0ccj1k _102k1m1q",
-  'large': "_1e0ccj1k _102k1m1q",
-  'medium': "_1e0ccj1k _102k1k8s",
-  'small': "_1e0ccj1k _102k1k8s"
+  xlarge: "_1e0ccj1k _102k1m1q",
+  large: "_1e0ccj1k _102k1m1q",
+  medium: "_1e0ccj1k _102k1k8s",
+  small: "_1e0ccj1k _102k1k8s"
 };
 var gapStylesLeft = {
-  'xlarge': "_7yhb147b _m6ukidpf",
-  'large': "_7yhb1e9d _m6ukidpf",
-  'medium': "_7yhbcxkx _m6ukidpf",
-  'small': "_7yhbpdf9 _m6ukidpf"
+  xlarge: "_7yhb147b _m6ukidpf",
+  large: "_7yhb1e9d _m6ukidpf",
+  medium: "_7yhbcxkx _m6ukidpf",
+  small: "_7yhbpdf9 _m6ukidpf"
 };
 var gapStylesRight = {
-  'xlarge': "_24rc147b _3dveidpf",
-  'large': "_24rc1e9d _3dveidpf",
-  'medium': "_24rccxkx _3dveidpf",
-  'small': "_24rcpdf9 _3dveidpf"
+  xlarge: "_24rc147b _3dveidpf",
+  large: "_24rc1e9d _3dveidpf",
+  medium: "_24rccxkx _3dveidpf",
+  small: "_24rcpdf9 _3dveidpf"
 };
 
 /**

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _react2 = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _utils = require("../../utils");
+var _block = _interopRequireDefault(require("../block"));
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+var _utils2 = require("../utils");
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  var lineHeight = (0, _utils.getMaxLineHeight)(size);
+  return (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    lineHeight: "".concat(lineHeight, "rem")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  (0, _utils.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+};
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+var MetadataBlockOld = function MetadataBlockOld(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+    _ref$primary = _ref.primary,
+    primary = _ref$primary === void 0 ? [] : _ref$primary,
+    _ref$secondary = _ref.secondary,
+    secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+  var primaryElements = (0, _utils2.renderElementItems)(primary);
+  var secondaryElements = (0, _utils2.renderElementItems)(secondary);
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Left,
+    overrideCss: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Right,
+    overrideCss: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+var _default = exports.default = MetadataBlockOld;

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

@@ -0,0 +1,10 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

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

@@ -1,35 +1,38 @@
+/* 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;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
-var _utils = require("../../utils");
 var _block = _interopRequireDefault(require("../block"));
-var _elementGroup = _interopRequireDefault(require("../element-group"));
-var _utils2 = require("../utils");
-var _excluded = ["maxLines", "status", "testId", "primary", "secondary"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _elementGroup = require("../element-group");
+var _utils = require("../utils");
+var _MetadataBlockOld = _interopRequireDefault(require("./MetadataBlockOld"));
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+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 DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
-  // MetadataBlock allows metadata elements to be displayed in
-  // multiple lines, with maximum of 2 lines.
-  // We need the height of the line to be equal on both left and right
-  // sides so they line up nicely.
-  var lineHeight = (0, _utils.getMaxLineHeight)(size);
-  return (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-    lineHeight: "".concat(lineHeight, "rem")
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  (0, _utils.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+var truncateStyles = {
+  '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
+  '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
+};
+var sizeStyles = {
+  xlarge: "_11c81oud _102k1k7u",
+  large: "_11c81oud _102k1k7u",
+  medium: "_11c81oud _102k1wto",
+  small: "_11c81oud _102k1wto"
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -63,23 +66,30 @@ var MetadataBlock = function MetadataBlock(_ref) {
   if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
     return null;
   }
-  var primaryElements = (0, _utils2.renderElementItems)(primary);
-  var secondaryElements = (0, _utils2.renderElementItems)(secondary);
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
-  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+  var maxLinesTotal = getMaxLines(maxLines);
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }), primaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
     align: _constants.SmartLinkAlignment.Left,
-    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
-    width: _constants.SmartLinkWidth.Flexible
-  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
     align: _constants.SmartLinkAlignment.Right,
-    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
-    width: _constants.SmartLinkWidth.Flexible
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };
-var _default = exports.default = MetadataBlock;
+var MetadataBlockExported = function MetadataBlockExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MetadataBlock, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_MetadataBlockOld.default, props);
+  }
+};
+var _default = exports.default = MetadataBlockExported;

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

@@ -21,10 +21,10 @@ var _excluded = ["actionGroup", "testId", "title", "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; }
 var iconStyle = {
-  'xlarge': "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
-  'large': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
-  'medium': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
-  'small': "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.4.0",
+  packageVersion: "34.5.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.4.0"
+  packageVersion: "34.5.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/utils/index.js

@@ -11,12 +11,16 @@ export const isIframe = () => window.parent !== parent;
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
  * in which case typically only a standard clickthrough will occur, this is likely a small portion of events
  */
-export const isSpecialKey = event => event.metaKey || event.ctrlKey;
+export const isSpecialKey = event => {
+  return fg('platform-smart-card-shift-key') ? event.metaKey || event.ctrlKey || event.shiftKey : event.metaKey || event.ctrlKey;
+};
 export const isSpecialClick = event => event.button === 1;
 export const getIconForFileType = fileMimeType => {
   if (!fileMimeType) {

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

@@ -30,22 +30,22 @@ const positionStyle = {
 };
 const horizontalStyleBase = null;
 const horizontalStyleByHeight = {
-  'xlarge': "_1e0ccj1k _102k1m1q",
-  'large': "_1e0ccj1k _102k1m1q",
-  'medium': "_1e0ccj1k _102k1k8s",
-  'small': "_1e0ccj1k _102k1k8s"
+  xlarge: "_1e0ccj1k _102k1m1q",
+  large: "_1e0ccj1k _102k1m1q",
+  medium: "_1e0ccj1k _102k1k8s",
+  small: "_1e0ccj1k _102k1k8s"
 };
 const gapStylesLeft = {
-  'xlarge': "_7yhb147b _m6ukidpf",
-  'large': "_7yhb1e9d _m6ukidpf",
-  'medium': "_7yhbcxkx _m6ukidpf",
-  'small': "_7yhbpdf9 _m6ukidpf"
+  xlarge: "_7yhb147b _m6ukidpf",
+  large: "_7yhb1e9d _m6ukidpf",
+  medium: "_7yhbcxkx _m6ukidpf",
+  small: "_7yhbpdf9 _m6ukidpf"
 };
 const gapStylesRight = {
-  'xlarge': "_24rc147b _3dveidpf",
-  'large': "_24rc1e9d _3dveidpf",
-  'medium': "_24rccxkx _3dveidpf",
-  'small': "_24rcpdf9 _3dveidpf"
+  xlarge: "_24rc147b _3dveidpf",
+  large: "_24rc1e9d _3dveidpf",
+  medium: "_24rccxkx _3dveidpf",
+  small: "_24rcpdf9 _3dveidpf"
 };
 
 /**

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

@@ -0,0 +1,75 @@
+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 { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { renderElementItems } from '../utils';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+const getElementGroupStyles = (size, maxLines) => {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  const lineHeight = getMaxLineHeight(size);
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    lineHeight: `${lineHeight}rem`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getTruncateStyles(maxLines, lineHeight + 'rem'));
+};
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+const MetadataBlockOld = ({
+  maxLines = DEFAULT_MAX_LINES,
+  status = SmartLinkStatus.Fallback,
+  testId = 'smart-block-metadata',
+  primary = [],
+  secondary = [],
+  ...blockProps
+}) => {
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  const primaryElements = renderElementItems(primary);
+  const secondaryElements = renderElementItems(secondary);
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+export default MetadataBlockOld;

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

@@ -0,0 +1,10 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

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

@@ -1,28 +1,26 @@
+/* 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 { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 import Block from '../block';
-import ElementGroup from '../element-group';
+import { ElementGroupNew as ElementGroup } from '../element-group';
 import { renderElementItems } from '../utils';
+import MetadataBlockOld from './MetadataBlockOld';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
-const getElementGroupStyles = (size, maxLines) => {
-  // MetadataBlock allows metadata elements to be displayed in
-  // multiple lines, with maximum of 2 lines.
-  // We need the height of the line to be equal on both left and right
-  // sides so they line up nicely.
-  const lineHeight = getMaxLineHeight(size);
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-    lineHeight: `${lineHeight}rem`
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getTruncateStyles(maxLines, lineHeight + 'rem'));
+const truncateStyles = {
+  '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
+  '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
+};
+const sizeStyles = {
+  xlarge: "_11c81oud _102k1k7u",
+  large: "_11c81oud _102k1k7u",
+  medium: "_11c81oud _102k1wto",
+  small: "_11c81oud _102k1wto"
 };
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -57,19 +55,26 @@ const MetadataBlock = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
-  const elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  const maxLinesTotal = getMaxLines(maxLines);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };
-export default MetadataBlock;
+const MetadataBlockExported = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MetadataBlock, props);
+  } else {
+    return /*#__PURE__*/React.createElement(MetadataBlockOld, props);
+  }
+};
+export default MetadataBlockExported;

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

@@ -10,10 +10,10 @@ import LoadingSkeleton from '../../../common/loading-skeleton';
 import Block from '../../block';
 import TitleBlockResolvingViewOld from './TitleBlockResolvingViewOld';
 const iconStyle = {
-  'xlarge': "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
-  'large': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
-  'medium': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
-  'small': "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting

package/dist/es2019/view/LinkUrl/index.js

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

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

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

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

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from "@atlaskit/platform-feature-flags";
-import { ErrorSVGOld } from "./ErrorSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ErrorSVGOld } from './ErrorSvgOld';
 const errorStyles = null;
 const ErrorSVGNew = props => {
   const id = 'related-links-error-svg';

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

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

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

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from "@atlaskit/platform-feature-flags";
-import { UnavailableSVGOld } from "./UnavailableSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { UnavailableSVGOld } from './UnavailableSvgOld';
 const unavailableStyles = null;
 const UnavailableSVGNew = props => {
   const id = 'related-links-unavailable-svg';

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.4.0"
+  packageVersion: "34.5.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/index.js

@@ -19,13 +19,15 @@ export var isIframe = function isIframe() {
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held
  * in which case typically only a standard clickthrough will occur, this is likely a small portion of events
  */
 export var isSpecialKey = function isSpecialKey(event) {
-  return event.metaKey || event.ctrlKey;
+  return fg('platform-smart-card-shift-key') ? event.metaKey || event.ctrlKey || event.shiftKey : event.metaKey || event.ctrlKey;
 };
 export var isSpecialClick = function isSpecialClick(event) {
   return event.button === 1;

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

@@ -30,22 +30,22 @@ var positionStyle = {
 };
 var horizontalStyleBase = null;
 var horizontalStyleByHeight = {
-  'xlarge': "_1e0ccj1k _102k1m1q",
-  'large': "_1e0ccj1k _102k1m1q",
-  'medium': "_1e0ccj1k _102k1k8s",
-  'small': "_1e0ccj1k _102k1k8s"
+  xlarge: "_1e0ccj1k _102k1m1q",
+  large: "_1e0ccj1k _102k1m1q",
+  medium: "_1e0ccj1k _102k1k8s",
+  small: "_1e0ccj1k _102k1k8s"
 };
 var gapStylesLeft = {
-  'xlarge': "_7yhb147b _m6ukidpf",
-  'large': "_7yhb1e9d _m6ukidpf",
-  'medium': "_7yhbcxkx _m6ukidpf",
-  'small': "_7yhbpdf9 _m6ukidpf"
+  xlarge: "_7yhb147b _m6ukidpf",
+  large: "_7yhb1e9d _m6ukidpf",
+  medium: "_7yhbcxkx _m6ukidpf",
+  small: "_7yhbpdf9 _m6ukidpf"
 };
 var gapStylesRight = {
-  'xlarge': "_24rc147b _3dveidpf",
-  'large': "_24rc1e9d _3dveidpf",
-  'medium': "_24rccxkx _3dveidpf",
-  'small': "_24rcpdf9 _3dveidpf"
+  xlarge: "_24rc147b _3dveidpf",
+  large: "_24rc1e9d _3dveidpf",
+  medium: "_24rccxkx _3dveidpf",
+  small: "_24rcpdf9 _3dveidpf"
 };
 
 /**

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/MetadataBlockOld.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+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 { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+import { renderElementItems } from '../utils';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  var lineHeight = getMaxLineHeight(size);
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    lineHeight: "".concat(lineHeight, "rem")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getTruncateStyles(maxLines, lineHeight + 'rem'));
+};
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+var MetadataBlockOld = function MetadataBlockOld(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+    _ref$primary = _ref.primary,
+    primary = _ref$primary === void 0 ? [] : _ref$primary,
+    _ref$secondary = _ref.secondary,
+    secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+    blockProps = _objectWithoutProperties(_ref, _excluded);
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  var primaryElements = renderElementItems(primary);
+  var secondaryElements = renderElementItems(secondary);
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    overrideCss: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+export default MetadataBlockOld;

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/index.compiled.css

@@ -0,0 +1,10 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

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

@@ -1,30 +1,28 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
-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 { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
-import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 import Block from '../block';
-import ElementGroup from '../element-group';
+import { ElementGroupNew as ElementGroup } from '../element-group';
 import { renderElementItems } from '../utils';
+import MetadataBlockOld from './MetadataBlockOld';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
-  // MetadataBlock allows metadata elements to be displayed in
-  // multiple lines, with maximum of 2 lines.
-  // We need the height of the line to be equal on both left and right
-  // sides so they line up nicely.
-  var lineHeight = getMaxLineHeight(size);
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-    lineHeight: "".concat(lineHeight, "rem")
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getTruncateStyles(maxLines, lineHeight + 'rem'));
+var truncateStyles = {
+  '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
+  '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
+};
+var sizeStyles = {
+  xlarge: "_11c81oud _102k1k7u",
+  large: "_11c81oud _102k1k7u",
+  medium: "_11c81oud _102k1wto",
+  small: "_11c81oud _102k1wto"
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -62,19 +60,26 @@ var MetadataBlock = function MetadataBlock(_ref) {
   var secondaryElements = renderElementItems(secondary);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
-  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  var maxLinesTotal = getMaxLines(maxLines);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
   }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Left,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
-    overrideCss: elementGroupStyles,
     direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };
-export default MetadataBlock;
+var MetadataBlockExported = function MetadataBlockExported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MetadataBlock, props);
+  } else {
+    return /*#__PURE__*/React.createElement(MetadataBlockOld, props);
+  }
+};
+export default MetadataBlockExported;

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

@@ -12,10 +12,10 @@ import LoadingSkeleton from '../../../common/loading-skeleton';
 import Block from '../../block';
 import TitleBlockResolvingViewOld from './TitleBlockResolvingViewOld';
 var iconStyle = {
-  'xlarge': "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
-  'large': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
-  'medium': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
-  'small': "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting

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

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

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

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

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

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from "@atlaskit/platform-feature-flags";
-import { ErrorSVGOld } from "./ErrorSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ErrorSVGOld } from './ErrorSvgOld';
 var errorStyles = null;
 var ErrorSVGNew = function ErrorSVGNew(props) {
   var id = 'related-links-error-svg';

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

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

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

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from "@atlaskit/platform-feature-flags";
-import { UnavailableSVGOld } from "./UnavailableSvgOld";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { UnavailableSVGOld } from './UnavailableSvgOld';
 var unavailableStyles = null;
 var UnavailableSVGNew = function UnavailableSVGNew(props) {
   var id = 'related-links-unavailable-svg';

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

@@ -7,6 +7,8 @@ export declare const isIframe: () => boolean;
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held

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

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

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

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

package/dist/types-ts4.5/utils/index.d.ts

@@ -7,6 +7,8 @@ export declare const isIframe: () => boolean;
  * Meta key = cmd on mac, windows key on windows
  * Ctrl key on mac by default triggers a right click instead of left click
  * Ctrl key on Windows has the same behaviour of cmd key of mac (open in new tab)
+ * Shift key is also a "special" key because the default behavior of Chromium-based browsers is to open the
+ * link in a new window; Arc browser has custom logic to show links in its "peek" window when shift is held.
  *
  * `isSpecialKey` on a mouse event on mac with default behaviour should be equivalent to opening in new tab
  * On Windows it will be equivalent to opening a new tab, unless its the Window key that is held

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "34.4.0",
+	"version": "34.5.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -189,6 +189,9 @@
 		"bandicoots-compiled-migration-smartcard": {
 			"type": "boolean"
 		},
+		"platform-smart-card-shift-key": {
+			"type": "boolean"
+		},
 		"platform-smart-card-icon-migration": {
 			"type": "boolean"
 		}