@atlaskit/smart-card 36.15.0 → 36.15.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 36.15.2
+
+### Patch Changes
+
+- [#150610](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150610)
+  [`b33efda8cfa3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b33efda8cfa3f) -
+  [ux] Fix BlockCard button get cutoff in safari (behind fg platform-linking-visual-refresh-v2)
+
+## 36.15.1
+
+### Patch Changes
+
+- [#151434](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/151434)
+  [`af0089cbc89d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af0089cbc89d6) -
+  [ux] Fix InlineCard Lozenge overlap other element in smaller space
+
 ## 36.15.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: "36.15.0"
+  packageVersion: "36.15.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
@@ -25,6 +26,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var metadataBlockCssOld = null;
 
 /**
@@ -45,6 +47,13 @@ var ResolvedView = function ResolvedView(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
     setIsPreviewBlockErrored = _useState2[1];
+  var _ref2 = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -102,7 +111,7 @@ var ResolvedView = function ResolvedView(_ref) {
   })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ResolvedView);

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

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

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

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
@@ -23,6 +25,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -35,6 +38,13 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     url = _ref.url;
+  var _ref2 = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -59,7 +69,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     actions: actions,
     testId: "smart-block-card-footer",
     status: cardState.status,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 var _default = exports.default = UnresolvedView;

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

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

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

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
@@ -23,6 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 actionGroupStylesOld = null;
 var actionGroupStyles = null;
+var safariStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -35,6 +38,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     var _filterActionItems;
     return ((_filterActionItems = (0, _utils.filterActionItems)(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  var _ref = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref$safari = _ref.safari,
+    safari = _ref$safari === void 0 ? false : _ref$safari;
   var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -48,17 +58,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     appearance: 'subtle'
   } : {}, {
     testId: "".concat(testId, "-provider")
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, (0, _extends2.default)({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, {
     testId: "smart-element-group-actions",
     align: _constants.SmartLinkAlignment.Right,
-    direction: _constants.SmartLinkDirection.Horizontal
-  }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
-    css: size === _constants.SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === _constants.SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: _constants.SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(_actionGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([size === _constants.SmartLinkSize.XLarge && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === _constants.SmartLinkSize.XLarge && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

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

@@ -5,4 +5,5 @@
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f1osq{max-width:100%}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}

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

@@ -22,13 +22,15 @@ var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
 var _actionButton = require("../common/action-button");
+var _inlineLozenge = _interopRequireDefault(require("../common/inline-lozenge"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var styles = {
   iconWrapper: "_2hwx1i6y _1e0cbu77",
-  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  actionButtonLozengeStyleOld: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  actionButtonLozengeStyleNew: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _p12f1osq"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
   if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
@@ -113,8 +115,22 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = function InlineC
     }
     if (onAuthorise) {
       if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-inline-lozenge')) {
+          return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+            xcss: styles.actionButtonLozengeStyleNew,
+            onClick: handleRetry,
+            style: {
+              font: "inherit"
+            },
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/_react.default.createElement(_inlineLozenge.default, (0, _extends2.default)({
+            appearance: "moved"
+          }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? {
+            isBold: true
+          } : undefined), renderForbiddenAccessMessage()));
+        }
         return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
-          xcss: styles.actionButtonLozengeStyle,
+          xcss: styles.actionButtonLozengeStyleOld,
           onClick: handleRetry,
           testId: "button-connect-other-account"
         }, /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({

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

@@ -279,6 +279,8 @@ var LozengeWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref5, __c
     className: (0, _runtime.ax)(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
   }));
 });
+
+// Remove on platform-linking-visual-refresh-inline-lozenge cleanup
 if (process.env.NODE_ENV !== 'production') {
   LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }

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

@@ -15,6 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _HoverCard = require("../../HoverCard");
+var _inlineLozenge = _interopRequireDefault(require("../common/inline-lozenge"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -33,6 +34,18 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         return null;
       }
       var appearance = lozenge.appearance || 'default';
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-inline-lozenge')) {
+        var _lozenge$style, _lozenge$style2;
+        return /*#__PURE__*/_react.default.createElement(_inlineLozenge.default, {
+          testId: "inline-card-resolved-view-lozenge",
+          appearance: appearance,
+          style: {
+            backgroundColor: lozenge === null || lozenge === void 0 || (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
+            color: lozenge === null || lozenge === void 0 || (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
+          },
+          isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? lozenge.isBold !== false : lozenge.isBold
+        }, lozenge.text);
+      }
       return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         testId: "inline-card-resolved-view-lozenge",
         appearance: appearance

package/dist/cjs/view/InlineCard/common/inline-lozenge/index.compiled.css

@@ -0,0 +1,7 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkidpf{margin-top:0}
+._1e0c1o8l{display:inline-block}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._s7n4t94y{vertical-align:1px}

package/dist/cjs/view/InlineCard/common/inline-lozenge/index.js

@@ -0,0 +1,22 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"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 _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+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 wrapperStyles = null;
+var InlineLozenge = function InlineLozenge(props) {
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq"])
+  }, /*#__PURE__*/React.createElement(_lozenge.default, props));
+};
+var _default = exports.default = InlineLozenge;

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: "36.15.0",
+  packageVersion: "36.15.2",
   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: "36.15.0"
+  packageVersion: "36.15.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -4,6 +4,7 @@ import "./ResolvedView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName, ElementName, SmartLinkPosition, SmartLinkStatus } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
@@ -14,6 +15,7 @@ const titleBlockCssOld = null;
 const titleBlockCss = null;
 const footerBlockCssOld = null;
 const footerBlockCss = null;
+const footerBlockSafariStyles = null;
 const metadataBlockCssOld = null;
 
 /**
@@ -31,6 +33,11 @@ const ResolvedView = ({
   url
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -87,7 +94,7 @@ const ResolvedView = ({
   })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     status: SmartLinkStatus.Resolved,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default withFlexibleUIBlockCardStyle(ResolvedView);

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

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

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

@@ -3,6 +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 { useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import FlexibleCard from '../../../FlexibleCard';
 import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
@@ -13,6 +15,7 @@ const titleBlockCssOld = null;
 const titleBlockCss = null;
 const footerBlockCssOld = null;
 const footerBlockCss = null;
+const footerBlockSafariStyles = null;
 const UnresolvedView = ({
   actions,
   cardState,
@@ -24,30 +27,37 @@ const UnresolvedView = ({
   testId,
   title,
   url
-}) => /*#__PURE__*/React.createElement(FlexibleCard, {
-  appearance: "block",
-  cardState: cardState,
-  onAuthorize: onAuthorize,
-  onClick: onClick,
-  onError: onError,
-  origin: "smartLinkCard",
-  testId: testId,
-  ui: FlexibleCardUiOptions,
-  url: url
-}, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
-  hideIcon: !!title,
-  text: title,
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
-})), /*#__PURE__*/React.createElement(CustomBlock, {
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
-}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
-  status: cardState.status
-})), /*#__PURE__*/React.createElement(InternalFooterBlock, {
-  actions: actions,
-  testId: "smart-block-card-footer",
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
-}));
+}) => {
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    origin: "smartLinkCard",
+    testId: testId,
+    ui: FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
+    hideIcon: !!title,
+    text: title,
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
+  })), /*#__PURE__*/React.createElement(CustomBlock, {
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
+  }, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
+    status: cardState.status
+  })), /*#__PURE__*/React.createElement(InternalFooterBlock, {
+    actions: actions,
+    testId: "smart-block-card-footer",
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
+  }));
+};
 export default UnresolvedView;

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

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

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

@@ -1,8 +1,10 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -13,6 +15,7 @@ import ElementGroup from '../../element-group';
 import { filterActionItems } from '../../utils';
 const actionGroupStylesOld = null;
 const actionGroupStyles = null;
+const safariStyles = null;
 const FooterBlockResolvedView = props => {
   const {
     actions,
@@ -26,6 +29,11 @@ const FooterBlockResolvedView = props => {
     var _filterActionItems;
     return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -39,17 +47,13 @@ const FooterBlockResolvedView = props => {
     appearance: 'subtle'
   } : {}, {
     testId: `${testId}-provider`
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, _extends({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal
-  }, fg('platform-linking-visual-refresh-v1') ? {
-    css: size === SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(ActionGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && fg('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === SmartLinkSize.XLarge && !fg('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

package/dist/es2019/view/InlineCard/ForbiddenView/index.compiled.css

@@ -5,4 +5,5 @@
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f1osq{max-width:100%}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}

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

@@ -14,13 +14,15 @@ import { N500 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
+import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 const styles = {
   iconWrapper: "_2hwx1i6y _1e0cbu77",
-  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  actionButtonLozengeStyleOld: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  actionButtonLozengeStyleNew: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _p12f1osq"
 };
 const fallbackForbiddenIcon = () => {
   if (fg('platform-linking-visual-refresh-v1')) {
@@ -103,8 +105,22 @@ export const InlineCardForbiddenView = ({
     }
     if (onAuthorise) {
       if (fg('platform-linking-visual-refresh-v1')) {
+        if (fg('platform-linking-visual-refresh-inline-lozenge')) {
+          return /*#__PURE__*/React.createElement(Pressable, {
+            xcss: styles.actionButtonLozengeStyleNew,
+            onClick: handleRetry,
+            style: {
+              font: `inherit`
+            },
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/React.createElement(InlineLozenge, _extends({
+            appearance: "moved"
+          }, fg('platform-component-visual-refresh') ? {
+            isBold: true
+          } : undefined), renderForbiddenAccessMessage()));
+        }
         return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
-          xcss: styles.actionButtonLozengeStyle,
+          xcss: styles.actionButtonLozengeStyleOld,
           onClick: handleRetry,
           testId: "button-connect-other-account"
         }, /*#__PURE__*/React.createElement(Lozenge, _extends({

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -265,6 +265,8 @@ const LozengeWrapperOldVisualRefresh = forwardRef(({
     className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
   }));
 });
+
+// Remove on platform-linking-visual-refresh-inline-lozenge cleanup
 if (process.env.NODE_ENV !== 'production') {
   LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
+import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 export class InlineCardResolvedView extends React.Component {
@@ -14,6 +15,18 @@ export class InlineCardResolvedView extends React.Component {
       return null;
     }
     const appearance = lozenge.appearance || 'default';
+    if (fg('platform-linking-visual-refresh-inline-lozenge')) {
+      var _lozenge$style, _lozenge$style2;
+      return /*#__PURE__*/React.createElement(InlineLozenge, {
+        testId: "inline-card-resolved-view-lozenge",
+        appearance: appearance,
+        style: {
+          backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
+          color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
+        },
+        isBold: fg('platform-component-visual-refresh') ? lozenge.isBold !== false : lozenge.isBold
+      }, lozenge.text);
+    }
     return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
       testId: "inline-card-resolved-view-lozenge",
       appearance: appearance

package/dist/es2019/view/InlineCard/common/inline-lozenge/index.compiled.css

@@ -0,0 +1,7 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkidpf{margin-top:0}
+._1e0c1o8l{display:inline-block}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._s7n4t94y{vertical-align:1px}

package/dist/es2019/view/InlineCard/common/inline-lozenge/index.js

@@ -0,0 +1,10 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Lozenge from '@atlaskit/lozenge';
+const wrapperStyles = null;
+const InlineLozenge = props => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq"])
+}, /*#__PURE__*/React.createElement(Lozenge, props));
+export default InlineLozenge;

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: "36.15.0",
+  packageVersion: "36.15.2",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

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: "36.15.0"
+  packageVersion: "36.15.2"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -5,6 +5,7 @@ import "./ResolvedView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName, ElementName, SmartLinkPosition, SmartLinkStatus } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
@@ -15,6 +16,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var metadataBlockCssOld = null;
 
 /**
@@ -35,6 +37,13 @@ var ResolvedView = function ResolvedView(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
     setIsPreviewBlockErrored = _useState2[1];
+  var _ref2 = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -92,7 +101,7 @@ var ResolvedView = function ResolvedView(_ref) {
   })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     status: SmartLinkStatus.Resolved,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default withFlexibleUIBlockCardStyle(ResolvedView);

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

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

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

@@ -3,6 +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 { useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import FlexibleCard from '../../../FlexibleCard';
 import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
@@ -13,6 +15,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -25,6 +28,13 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     url = _ref.url;
+  var _ref2 = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -49,7 +59,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     actions: actions,
     testId: "smart-block-card-footer",
     status: cardState.status,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default UnresolvedView;

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

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

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

@@ -1,8 +1,10 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -13,6 +15,7 @@ import ElementGroup from '../../element-group';
 import { filterActionItems } from '../../utils';
 var actionGroupStylesOld = null;
 var actionGroupStyles = null;
+var safariStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -25,6 +28,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     var _filterActionItems;
     return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  var _ref = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref$safari = _ref.safari,
+    safari = _ref$safari === void 0 ? false : _ref$safari;
   var onDropdownOpenChange = useCallback(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -38,17 +48,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     appearance: 'subtle'
   } : {}, {
     testId: "".concat(testId, "-provider")
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, _extends({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal
-  }, fg('platform-linking-visual-refresh-v1') ? {
-    css: size === SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(ActionGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && fg('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === SmartLinkSize.XLarge && !fg('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

package/dist/esm/view/InlineCard/ForbiddenView/index.compiled.css

@@ -5,4 +5,5 @@
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f1osq{max-width:100%}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}

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

@@ -15,13 +15,15 @@ import { N500 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
+import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 var styles = {
   iconWrapper: "_2hwx1i6y _1e0cbu77",
-  actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
+  actionButtonLozengeStyleOld: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
+  actionButtonLozengeStyleNew: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _p12f1osq"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
   if (fg('platform-linking-visual-refresh-v1')) {
@@ -106,8 +108,22 @@ export var InlineCardForbiddenView = function InlineCardForbiddenView(_ref) {
     }
     if (onAuthorise) {
       if (fg('platform-linking-visual-refresh-v1')) {
+        if (fg('platform-linking-visual-refresh-inline-lozenge')) {
+          return /*#__PURE__*/React.createElement(Pressable, {
+            xcss: styles.actionButtonLozengeStyleNew,
+            onClick: handleRetry,
+            style: {
+              font: "inherit"
+            },
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/React.createElement(InlineLozenge, _extends({
+            appearance: "moved"
+          }, fg('platform-component-visual-refresh') ? {
+            isBold: true
+          } : undefined), renderForbiddenAccessMessage()));
+        }
         return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
-          xcss: styles.actionButtonLozengeStyle,
+          xcss: styles.actionButtonLozengeStyleOld,
           onClick: handleRetry,
           testId: "button-connect-other-account"
         }, /*#__PURE__*/React.createElement(Lozenge, _extends({

package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -270,6 +270,8 @@ var LozengeWrapperOldVisualRefresh = forwardRef(function (_ref5, __cmplr) {
     className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
   }));
 });
+
+// Remove on platform-linking-visual-refresh-inline-lozenge cleanup
 if (process.env.NODE_ENV !== 'production') {
   LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -10,6 +10,7 @@ import React from 'react';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
+import InlineLozenge from '../common/inline-lozenge';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
@@ -26,6 +27,18 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var appearance = lozenge.appearance || 'default';
+      if (fg('platform-linking-visual-refresh-inline-lozenge')) {
+        var _lozenge$style, _lozenge$style2;
+        return /*#__PURE__*/React.createElement(InlineLozenge, {
+          testId: "inline-card-resolved-view-lozenge",
+          appearance: appearance,
+          style: {
+            backgroundColor: lozenge === null || lozenge === void 0 || (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
+            color: lozenge === null || lozenge === void 0 || (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
+          },
+          isBold: fg('platform-component-visual-refresh') ? lozenge.isBold !== false : lozenge.isBold
+        }, lozenge.text);
+      }
       return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
         testId: "inline-card-resolved-view-lozenge",
         appearance: appearance

package/dist/esm/view/InlineCard/common/inline-lozenge/index.compiled.css

@@ -0,0 +1,7 @@
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19pkidpf{margin-top:0}
+._1e0c1o8l{display:inline-block}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._otyridpf{margin-bottom:0}
+._p12f1osq{max-width:100%}
+._s7n4t94y{vertical-align:1px}

package/dist/esm/view/InlineCard/common/inline-lozenge/index.js

@@ -0,0 +1,12 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Lozenge from '@atlaskit/lozenge';
+var wrapperStyles = null;
+var InlineLozenge = function InlineLozenge(props) {
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o _p12f1osq"])
+  }, /*#__PURE__*/React.createElement(Lozenge, props));
+};
+export default InlineLozenge;

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: "36.15.0",
+  packageVersion: "36.15.2",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/view/InlineCard/common/inline-lozenge/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type LozengeProps } from '@atlaskit/lozenge';
+type InlineLozengeProps = LozengeProps;
+declare const InlineLozenge: (props: InlineLozengeProps) => JSX.Element;
+export default InlineLozenge;

package/dist/types-ts4.5/view/InlineCard/common/inline-lozenge/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type LozengeProps } from '@atlaskit/lozenge';
+type InlineLozengeProps = LozengeProps;
+declare const InlineLozenge: (props: InlineLozengeProps) => JSX.Element;
+export default InlineLozenge;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "36.15.0",
+	"version": "36.15.2",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,9 +39,9 @@
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon": "^25.7.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.10.0",
+		"@atlaskit/icon-lab": "^4.11.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/icon-priority": "^6.3.0",
 		"@atlaskit/image": "^3.0.0",
@@ -97,12 +97,12 @@
 		"@atlaskit/css-reset": "^7.2.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/media-test-helpers": "^36.0.0",
-		"@atlaskit/react-ufo": "^3.9.0",
+		"@atlaskit/react-ufo": "^3.10.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/analytics-tooling": "^0.5.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/gemini": "^1.17.0",
+		"@atlassian/gemini": "^1.18.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^13.4.0",
@@ -221,6 +221,9 @@
 		"platform-linking-visual-refresh-v2": {
 			"type": "boolean"
 		},
+		"platform-linking-visual-refresh-inline-lozenge": {
+			"type": "boolean"
+		},
 		"platform-linking-flexible-card-openness": {
 			"type": "boolean"
 		},