@atlaskit/smart-card 34.6.5 → 34.7.0

package/dist/cjs/view/EmbedCard/views/unresolved-view/UnresolvedViewOld.js

@@ -0,0 +1,129 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _utils = require("../../../common/utils");
+var _ExpandedFrame = require("../../components/ExpandedFrame");
+var _ImageIcon = require("../../components/ImageIcon");
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var containerStyles = (0, _react2.css)({
+  display: 'grid',
+  height: 'inherit'
+});
+var contentStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  textAlign: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: (0, _utils.gs)(50)
+});
+var descriptionStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  textAlign: 'center'
+});
+var imageStyles = (0, _react2.css)({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+var UnresolvedViewOld = function UnresolvedViewOld(_ref) {
+  var button = _ref.button,
+    description = _ref.description,
+    frameStyle = _ref.frameStyle,
+    iconUrlOrElement = _ref.icon,
+    imageUrlOrElement = _ref.image,
+    inheritDimensions = _ref.inheritDimensions,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    testId = _ref.testId,
+    text = _ref.text,
+    title = _ref.title,
+    url = _ref.url;
+  var icon = (0, _react.useMemo)(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconUrlOrElement)) {
+      return iconUrlOrElement;
+    }
+    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+      src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
+      default: (0, _react2.jsx)(_link.default, {
+        label: "icon",
+        LEGACY_size: "small",
+        testId: "embed-card-fallback-icon",
+        color: "currentColor"
+      })
+    });
+  }, [iconUrlOrElement]);
+  var image = (0, _react.useMemo)(function () {
+    if (!imageUrlOrElement) {
+      return null;
+    }
+    var imageTestId = "".concat(testId, "-unresolved-image");
+    if (typeof imageUrlOrElement === 'string') {
+      // eslint-disable-next-line jsx-a11y/alt-text
+      return (0, _react2.jsx)("img", {
+        css: imageStyles,
+        "data-testid": imageTestId,
+        src: imageUrlOrElement
+      });
+    }
+    return (0, _react2.jsx)("div", {
+      css: imageStyles,
+      "data-testid": imageTestId
+    }, imageUrlOrElement);
+  }, [imageUrlOrElement, testId]);
+  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
+    href: url,
+    icon: icon,
+    inheritDimensions: inheritDimensions,
+    isSelected: isSelected,
+    onClick: onClick,
+    testId: testId,
+    text: text
+  }, (0, _react2.jsx)("div", {
+    css: containerStyles,
+    "data-testid": "".concat(testId, "-unresolved-container")
+  }, (0, _react2.jsx)("div", {
+    css: contentStyles
+  }, image, (0, _react2.jsx)(_heading.default, {
+    size: "large",
+    testId: "".concat(testId, "-unresolved-title")
+  }, title), (0, _react2.jsx)("span", {
+    css: descriptionStyles,
+    "data-testid": "".concat(testId, "-unresolved-description")
+  }, description), button)));
+};
+var _default = exports.default = UnresolvedViewOld;

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.compiled.css

@@ -0,0 +1,19 @@
+._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)}
+._1yt4pxbi{padding:var(--ds-space-200,1pc)}
+._zulpv47k{gap:var(--ds-space-250,20px)}
+._18u01wug{margin-left:auto}
+._19pk1wug{margin-top:auto}
+._1bah1h6o{justify-content:center}
+._1bsbmgvx{width:180px}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1kw7{height:inherit}
+._4t3i68cl{height:90pt}
+._5ral1f51{object-fit:contain}
+._otyr1wug{margin-bottom:auto}
+._p12f1kdj{max-width:25pc}
+._rsufaqso{object-position:center center}
+._y3gn1h6o{text-align:center}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,49 +6,22 @@ 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 _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
-var _utils = require("../../../common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ExpandedFrame = require("../../components/ExpandedFrame");
 var _ImageIcon = require("../../components/ImageIcon");
+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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var containerStyles = (0, _react2.css)({
-  display: 'grid',
-  height: 'inherit'
-});
-var contentStyles = (0, _react2.css)({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  textAlign: 'center',
-  alignItems: 'center',
-  margin: 'auto',
-  padding: "var(--ds-space-200, 16px)",
-  gap: "var(--ds-space-250, 20px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxWidth: (0, _utils.gs)(50)
-});
-var descriptionStyles = (0, _react2.css)({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  textAlign: 'center'
-});
-var imageStyles = (0, _react2.css)({
-  height: '120px',
-  width: '180px',
-  objectFit: 'contain',
-  objectPosition: 'center center'
-});
+var containerStyles = null;
+var contentStyles = null;
+var descriptionStyles = null;
+var imageStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
@@ -65,9 +39,9 @@ var UnresolvedView = function UnresolvedView(_ref) {
     if ( /*#__PURE__*/_react.default.isValidElement(iconUrlOrElement)) {
       return iconUrlOrElement;
     }
-    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+    return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
-      default: (0, _react2.jsx)(_link.default, {
+      default: /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "icon",
         LEGACY_size: "small",
         testId: "embed-card-fallback-icon",
@@ -82,18 +56,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
     var imageTestId = "".concat(testId, "-unresolved-image");
     if (typeof imageUrlOrElement === 'string') {
       // eslint-disable-next-line jsx-a11y/alt-text
-      return (0, _react2.jsx)("img", {
-        css: imageStyles,
+      return /*#__PURE__*/_react.default.createElement("img", {
         "data-testid": imageTestId,
-        src: imageUrlOrElement
+        src: imageUrlOrElement,
+        className: (0, _runtime.ax)(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
       });
     }
-    return (0, _react2.jsx)("div", {
-      css: imageStyles,
-      "data-testid": imageTestId
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": imageTestId,
+      className: (0, _runtime.ax)(["_4t3i68cl _1bsbmgvx _5ral1f51 _rsufaqso"])
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame
   // Scroll bar must be shown for unresolved views to display the connect account button
   , {
     allowScrollBar: true,
@@ -113,17 +87,24 @@ var UnresolvedView = function UnresolvedView(_ref) {
     onClick: onClick,
     testId: testId,
     text: text
-  }, (0, _react2.jsx)("div", {
-    css: containerStyles,
-    "data-testid": "".concat(testId, "-unresolved-container")
-  }, (0, _react2.jsx)("div", {
-    css: contentStyles
-  }, image, (0, _react2.jsx)(_heading.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "".concat(testId, "-unresolved-container"),
+    className: (0, _runtime.ax)(["_1e0c11p5 _4t3i1kw7"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_19pk1wug _2hwx1wug _otyr1wug _18u01wug _1yt4pxbi _zulpv47k _1e0c1txw _2lx21bp4 _1bah1h6o _y3gn1h6o _4cvr1h6o _p12f1kdj"])
+  }, image, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large",
     testId: "".concat(testId, "-unresolved-title")
-  }, title), (0, _react2.jsx)("span", {
-    css: descriptionStyles,
-    "data-testid": "".concat(testId, "-unresolved-description")
+  }, title), /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "".concat(testId, "-unresolved-description"),
+    className: (0, _runtime.ax)(["_11c81oud _y3gn1h6o"])
   }, description), button)));
 };
-var _default = exports.default = UnresolvedView;
+var UnresolvedViewExported = exports.UnresolvedViewExported = function UnresolvedViewExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(UnresolvedView, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_UnresolvedViewOld.default, props);
+  }
+};
+var _default = exports.default = UnresolvedViewExported;

package/dist/cjs/view/FlexibleCard/components/container/index.compiled.css

@@ -1,15 +1,16 @@
-._18s8v77o{margin:var(--ds-space-025,2px)}
+
 ._19itn8v0{border:var(--_vzvmm2)}
 ._1yt418y6{padding:var(--_1xumd0e)}
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulp1jvo{gap:1.25rem 0}
 ._zulp1qos{gap:.5rem 0}
 ._zulpfzsm{gap:.25rem 0}
-._zulph3jc{gap:1rem 0}
+._zulph3jc{gap:1rem 0}._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bv15sf{padding-left:calc(var(--preview-block-width) + 1.25rem)}
 ._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
 ._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
 ._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1pcmkb7n:hover~.actions-button-group{opacity:1}
 ._1reo15vq{overflow-x:hidden}
@@ -20,11 +21,13 @@
 ._1yob1kwk{--container-gap-right:.5rem}
 ._1yob1wow{--container-gap-right:var(--_12k13bg)}
 ._1yob6mu8{--container-gap-right:.25rem}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._2lx21bp4{flex-direction:column}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
 ._jb7v18y6{--container-padding:var(--_1xumd0e)}
 ._kqswh2mm{position:relative}
 ._nqwih2mm .has-action, ._18ywh2mm a, ._1nq3h2mm button{position:relative}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._r37x1r5k{--preview-block-width:30%}
 ._u5f315sf{padding-right:calc(var(--preview-block-width) + 1.25rem)}
 ._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}

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

@@ -199,7 +199,7 @@ var ContainerNew = function ContainerNew(_ref3) {
   var container = /*#__PURE__*/_react.default.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itn8v0 _2rkopd34 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itn8v0 _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
     style: {
       "--_1xumd0e": (0, _runtime.ix)(padding),
       "--_73mooq": (0, _runtime.ix)(previewOnLeft ? gap : padding),

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.compiled.css

@@ -1,8 +1,11 @@
-
-._keweg4wb button{padding:var(--_1puzam4)}._14hp1wdt button{width:220px}
+._11lvutpp button{padding-left:var(--ds-space-150,9pt)}
+._14hp1wdt button{width:220px}
 ._18m91wug{overflow-y:auto}
+._1gfl12x7 button{padding-top:var(--ds-space-075,6px)}
+._1gqn12x7 button{padding-bottom:var(--ds-space-075,6px)}
 ._c71l1mjv{max-height:300px}
 ._d4lf1f4h button{min-height:28px}
+._yhjmutpp button{padding-right:var(--ds-space-150,9pt)}
 ._1ll7166n button:focus, ._qprf166n button:focus-visible{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
 ._1pv01r31 button:focus, ._1m1b1r31 button:focus-visible{outline-color:currentColor}
 ._n6y8usvi button:focus, ._109gusvi button:focus-visible{box-sizing:border-box}

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.js

@@ -24,9 +24,8 @@ var LozengeActionItemsGroupNew = function LozengeActionItemsGroupNew(_ref) {
     onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "-item-group"),
-    className: (0, _runtime.ax)(["_c71l1mjv _18m91wug _keweg4wb _1pv01r31 _1m1b1r31 _qh55glyw _lt2aglyw _ph3k1o36 _1twe1o36 _1ll7166n _qprf166n _n6y8usvi _109gusvi _z29h1bda _wlxp1bda _d4lf1f4h _14hp1wdt _6pup1kw7"]),
+    className: (0, _runtime.ax)(["_c71l1mjv _18m91wug _1pv01r31 _1m1b1r31 _qh55glyw _lt2aglyw _ph3k1o36 _1twe1o36 _1ll7166n _qprf166n _n6y8usvi _109gusvi _z29h1bda _wlxp1bda _1gfl12x7 _yhjmutpp _1gqn12x7 _11lvutpp _d4lf1f4h _14hp1wdt _6pup1kw7"]),
     style: {
-      "--_1puzam4": (0, _runtime.ix)("var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)")),
       "--_1uho1ce": (0, _runtime.ix)("inset 2px 0 0 ".concat("var(--ds-border-selected, #0C66E4)"))
     }
   }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -1,14 +1,16 @@
 
 ._kkk2n7od{all:unset}
-._18s8v77o{margin:var(--ds-space-025,2px)}
 ._15vhn7od{font-variant:unset}
 ._189eyh40{border-width:2px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
 ._1wybn7od{font-size:unset}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._4cvr1h6o{align-items:center}
 ._80omtlke{cursor:pointer}
 ._bfhk18uv{background-color:initial}
@@ -16,6 +18,7 @@
 ._ect4n7od{font-family:unset}
 ._k48pn7od{font-weight:unset}
 ._n3tdidpf{padding-bottom:0}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._syazn7od{color:unset}
 ._u5f3idpf{padding-right:0}
 ._vwz4idpf{line-height:0}

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -70,7 +70,7 @@ var LozengeActionTriggerNew = function LozengeActionTriggerNew(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     ref: triggerRef,
-    className: (0, _runtime.ax)(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _18s8v77o _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk18uv _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejjo89b _1u6lo89b _6ssho89b"]),
+    className: (0, _runtime.ax)(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk18uv _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejjo89b _1u6lo89b _6ssho89b"]),
     style: {
       "--_sq39bb": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"))
     }

package/dist/cjs/view/HoverCard/components/views/resolving/index.compiled.css

@@ -1,12 +1,15 @@
 
-._1yt41e9d{padding:var(--ds-space-200,1rem)}
 ._zulpcxkx{gap:var(--ds-space-100,.5rem)}
 ._zulpud5o{gap:.625rem}._16jlkb7n{flex-grow:1}
+._19bv1e9d{padding-left:var(--ds-space-200,1rem)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1k92{height:1.25rem}
+._ca0q1e9d{padding-top:var(--ds-space-200,1rem)}
 ._e2oo1osq span{width:100%}
-._i0dl1wug{flex-basis:auto}
+._i0dl1wug{flex-basis:auto}
+._n3td1e9d{padding-bottom:var(--ds-space-200,1rem)}
+._u5f31e9d{padding-right:var(--ds-space-200,1rem)}

package/dist/cjs/view/HoverCard/components/views/resolving/index.js

@@ -35,7 +35,7 @@ var HoverCardLoadingViewNew = function HoverCardLoadingViewNew(_ref) {
   var LoadingSkeleton = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _loadingSkeleton.LoadingSkeletonNew : _loadingSkeleton.LoadingSkeletonOld;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_1yt41e9d _1e0c1txw _2lx21bp4"])
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _ca0q1e9d _u5f31e9d _n3td1e9d _19bv1e9d"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpud5o _1e0c1txw _2lx21bp4 _4cvr1h6o"])
   }, /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -20,6 +20,7 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
+var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -51,10 +52,16 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
     });
     (0, _defineProperty2.default)(_this, "renderActionButton", function () {
       var onRetry = _this.props.onRetry;
-      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
-      return onRetry && /*#__PURE__*/_react.default.createElement(ActionButton, {
+      var Button = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
+          component: _actionButton.ActionButton,
+          onClick: _this.handleRetry
+        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));
+      }
+      return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
         spacing: "none",
-        component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButton : _styledEmotion.IconStyledButton,
+        component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButtonOldVisualRefresh : _styledEmotion.IconStyledButton,
         onClick: _this.handleRetry,
         role: "button"
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -23,6 +23,7 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
+var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -112,20 +113,30 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
     (0, _defineProperty2.default)(_this, "renderActionButton", function () {
       var _this$props$requestAc;
       var onAuthorise = _this.props.onAuthorise;
-      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
+      var LozengeWrapper = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? _IconAndTitleLayout.LozengeWrapper : _styled.LozengeWrapperOldVisualRefresh;
+      var Button = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
         if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+          if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
+            return /*#__PURE__*/_react.default.createElement(Button, {
+              onClick: _this.handleRetry,
+              component: _actionButton.ActionButton,
+              testId: "button-connect-other-account",
+              isDisabled: isDisabled
+            }, _this.renderForbiddenAccessMessage());
+          }
+          return /*#__PURE__*/_react.default.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
-            component: _styled2.IconStyledButton,
+            component: _styled2.IconStyledButtonOldVisualRefresh,
             testId: "button-connect-other-account",
             role: "button",
             isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
           }, _this.renderForbiddenAccessMessage());
         } else {
-          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+          return /*#__PURE__*/_react.default.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
             component: _styledEmotion.IconStyledButton,
@@ -136,13 +147,22 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         }
       }
       if (onAuthorise) {
-        return /*#__PURE__*/_react.default.createElement(_button.default, {
+        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+            xcss: actionButtonLozengeStyle,
+            onClick: _this.handleRetry,
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+            appearance: 'moved'
+          }, _this.renderForbiddenAccessMessage())));
+        }
+        return /*#__PURE__*/_react.default.createElement(Button, {
           spacing: "none",
           onClick: _this.handleRetry,
           appearance: "subtle-link",
           testId: "button-connect-other-account",
           role: "button"
-        }, /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+        }, /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
           appearance: 'moved'
         }, _this.renderForbiddenAccessMessage())));
       }
@@ -182,4 +202,8 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
       return content;
     }
   }]);
-}(_react.default.Component);
+}(_react.default.Component);
+var actionButtonLozengeStyle = (0, _primitives.xcss)({
+  backgroundColor: 'color.background.neutral.subtle',
+  padding: 'space.0'
+});

package/dist/cjs/view/InlineCard/Frame/styled.compiled.css

@@ -1,9 +1,10 @@
-
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
 ._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._v56415x0{transition:all .1s ease-in-out}
-._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}._12ji1r31{outline-color:currentColor}
+._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}
+._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qscw00{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -12,6 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"],
   _excluded2 = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"];
@@ -29,7 +30,7 @@ var WrapperSpan = exports.WrapperSpan = /*#__PURE__*/(0, _react.forwardRef)(func
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
     ref: ref
   }, props, {
-    className: (0, _runtime.ax)(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
   }), props.children);
 });
 var WrapperAnchor = exports.WrapperAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -44,10 +45,11 @@ var WrapperAnchor = exports.WrapperAnchor = /*#__PURE__*/(0, _react.forwardRef)(
     href: href,
     ref: ref
   }, props, {
-    className: (0, _runtime.ax)(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
   }), props.children);
 });
-var baseWrapperStyles = null;
+var baseWrapperStylesNew = null;
+var baseWrapperStylesOld = null;
 
 // if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
 var interactiveStyles = null;
@@ -55,6 +57,7 @@ var hoveredStyles = null;
 var hoveredWithBackgroundStyles = null;
 var withoutBackgroundStyles = null;
 var withBackgroundStyles = null;
-var truncateStyles = null;
+var truncateStylesNew = null;
+var truncateStylesOld = null;
 var notSelectedStyle = null;
 var selectedStyles = null;

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,4 +1,5 @@
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
 ._1bnxglyw:hover{text-decoration-line:none}