@atlaskit/smart-card 43.20.8 → 43.21.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 43.21.0
+
+### Minor Changes
+
+- [`1dbb521f75d85`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1dbb521f75d85) -
+  [ux] Add maxWidth prop to FlexibleCard's State Lozenge, behind fg
+  platform_navx_sl_lozenge_max_width.
+
+### Patch Changes
+
+- [`451616e6c693d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/451616e6c693d) -
+  NAVX-3137 cleaning up navx-2185-smart-link-preview-modal-icon-role
+- Updated dependencies
+
 ## 43.20.8
 
 ### Patch Changes

package/dist/cjs/__tests__/vr-tests/__snapshots__/action-lozenge/action-trigger--default--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a54da48270d4ee29edca083b504ad489927ec4ff1161b652ad4360fe471ae5e0
+size 1921

package/dist/cjs/__tests__/vr-tests/__snapshots__/flex-ui-elements/flex-ui-atlaskit-badge-view--default.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:48fb56e2f9587b60f4d0f612c2a7461db21693797621e0d8d62e8456c62535f8
-size 5010
+oid sha256:4febc55bef67ab94fd67fbe34afb8efbe728b81605ec537fb8b97cc66f78780e
+size 8404

package/dist/cjs/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-false.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bf5409f5143a160b5bb5269da8d7f6e3575c174b1edb207fb584842d7695716
-size 72911
+oid sha256:fd4ce1e874bb5cef90c294ea4d3c15691e816b1077d7309a1cbebd588cbc838b
+size 69991

package/dist/cjs/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-true.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0c112eb8de1d2c9606a8a45b6e53a30dff607faef1110f483084e53480a82cf8
-size 73353
+oid sha256:37e1a1a35f2fa0001447c300169b583c490e89a4d27f6b1e605ec516889b8deb
+size 70441

package/dist/cjs/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb6de90a1630f1cabfedf29c6abd8bf24bafb5f82597bac022bcd2e9aa4ff176
+size 26308

package/dist/cjs/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e3096d4d354e004dd2a15fd3bda5fd8ebcc79a367e15289ba57b1d7597508ca
+size 26864

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

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

@@ -82,8 +82,8 @@ var LinkInfo = function LinkInfo(_ref) {
         label: _messages.messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: "".concat(testId, "-url"),
-        role: (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? _messages.messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": _messages.messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -187,8 +187,8 @@ var LinkInfoNew = function LinkInfoNew(_ref2) {
         label: _messages.messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: "".concat(testId, "-url"),
-        role: (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? _messages.messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": _messages.messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);

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

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var LinkInfoButton = function LinkInfoButton(_ref) {
@@ -27,15 +25,14 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     hideTooltipOnClick: true,
     tag: "span",
     testId: "".concat(testId, "-tooltip")
-  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
-    testId: "".concat(testId, "-button")
-  }, (0, _platformFeatureFlags.fg)('navx-2185-smart-link-preview-modal-icon-role') ? {
+    testId: "".concat(testId, "-button"),
     role: role
-  } : {})));
+  }));
 };
 var _default = exports.default = LinkInfoButton;

package/dist/cjs/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -28,28 +28,34 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
   var action = _ref.action,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    name = _ref.name,
     className = _ref.className,
+    maxWidth = _ref.maxWidth,
+    name = _ref.name,
+    onAfterChanged = _ref.onAfterChanged,
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId,
-    onAfterChanged = _ref.onAfterChanged;
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
   var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   if (!text) {
     return null;
   }
-  var lozenge = action ? /*#__PURE__*/React.createElement(_lozengeAction.default, {
+  var lozenge = action ? /*#__PURE__*/React.createElement(_lozengeAction.default, (0, _extends2.default)({
     action: action,
-    appearance: appearance,
+    appearance: appearance
+  }, (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: maxWidth
+  } : undefined, {
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
     onAfterChanged: onAfterChanged
-  }) : /*#__PURE__*/React.createElement(_lozenge.default, (0, _extends2.default)({
+  })) : /*#__PURE__*/React.createElement(_lozenge.default, (0, _extends2.default)({
     appearance: appearance
   }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? {
     isBold: true
+  } : undefined, (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: maxWidth
   } : undefined, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,

package/dist/cjs/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -38,6 +38,7 @@ var LozengeAction = function LozengeAction(_ref) {
   var _action$update;
   var action = _ref.action,
     appearance = _ref.appearance,
+    maxWidth = _ref.maxWidth,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
     text = _ref.text,
@@ -146,11 +147,14 @@ var LozengeAction = function LozengeAction(_ref) {
   var trigger = (0, _react.useCallback)(function (props) {
     return /*#__PURE__*/_react.default.createElement(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
       appearance: selected.appearance,
-      isOpen: isOpen,
+      isOpen: isOpen
+    }, (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? {
+      maxWidth: maxWidth
+    } : undefined, {
       testId: testId,
       text: selected.text
     }));
-  }, [selected.appearance, selected.text, isOpen, testId]);
+  }, [selected.appearance, selected.text, isOpen, maxWidth, testId]);
   var handleItemClick = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, text, appearance) {
       var updateAction, request;

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

@@ -13,6 +13,7 @@
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
 ._1q2vglyw[aria-expanded=true]{outline-style:none}
@@ -29,6 +30,7 @@
 ._j8b81o36[aria-expanded=true]{outline-width:medium}
 ._k48pn7od{font-weight:unset}
 ._n3tdidpf{padding-bottom:0}
+._o5721q9c{white-space:nowrap}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
 ._syazn7od{color:unset}

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

@@ -21,7 +21,7 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("../../../../../../../../messages");
-var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "maxWidth", "testId", "text", "triggerRef"];
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -29,11 +29,13 @@ var styles = {
   lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
   lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
 };
+var textStyles = null;
 var triggerLozengeStyles = null;
 var triggerButtonStyles = null;
 var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
+    maxWidth = _ref.maxWidth,
     testId = _ref.testId,
     text = _ref.text,
     triggerRef = _ref.triggerRef,
@@ -87,18 +89,22 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     return /*#__PURE__*/React.createElement(_compiled.Box, {
       xcss: (0, _react2.cx)(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
       as: "span"
-    }, /*#__PURE__*/React.createElement(_lozenge.default, {
+    }, /*#__PURE__*/React.createElement(_lozenge.default, (0, _extends2.default)({
       appearance: appearance,
       isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? true : isHovering
+    }, (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? {
+      maxWidth: maxWidth
+    } : undefined, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
       style: {
         backgroundColor: lozengeBackgroundColor,
         color: lozengeForegroundColor
       }
-    }, /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw"])
-    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(_compiled.Box, {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+    }, text), /*#__PURE__*/React.createElement(_compiled.Box, {
       as: "span",
       xcss: styles.chevronDown
     }, /*#__PURE__*/React.createElement(_chevronDown.default, {
@@ -107,12 +113,15 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
       size: "small",
       "aria-hidden": true
     })))));
-  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
   return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
     type: "button"
   }, props, {
     "data-action-open": isOpen,
-    "data-testid": "".concat(testId, "--trigger")
+    "data-testid": "".concat(testId, "--trigger"),
+    style: {
+      maxWidth: (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? maxWidth : undefined
+    }
     // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseEnter: onMouseEnter

package/dist/cjs/view/FlexibleCard/external.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "CustomUnresolvedAction", {
 exports.toActionProps = exports.VoteCountElement = exports.ViewCountElement = exports.UnresolvedAction = exports.TitleElement = exports.TargetBranchElement = exports.SubscriberCountElement = exports.SubTasksProgressElement = exports.StoryPointsElement = exports.StateElement = exports.SourceBranchElement = exports.SnippetElement = exports.SentOnElement = exports.ReadTimeElement = exports.ReactCountElement = exports.ProviderElement = exports.ProgrammingLanguageElement = exports.PriorityElement = exports.PreviewElement = exports.PreviewAction = exports.OwnedByGroupElement = exports.OwnedByElement = exports.ModifiedOnElement = exports.ModifiedByElement = exports.LocationElement = exports.LinkIconElement = exports.LatestCommitElement = exports.FollowAction = exports.DueOnElement = exports.DownloadAction = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../constants");
 var _actions = require("./components/actions");
 var _elements = require("./components/elements");
@@ -144,8 +145,10 @@ var SnippetElement = exports.SnippetElement = function SnippetElement(props) {
 var SourceBranchElement = exports.SourceBranchElement = function SourceBranchElement() {
   return /*#__PURE__*/_react.default.createElement(_elements.SourceBranch, null);
 };
-var StateElement = exports.StateElement = function StateElement() {
-  return /*#__PURE__*/_react.default.createElement(_elements.State, null);
+var StateElement = exports.StateElement = function StateElement(props) {
+  return /*#__PURE__*/_react.default.createElement(_elements.State, (0, _platformFeatureFlags.fg)('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: props === null || props === void 0 ? void 0 : props.maxWidth
+  } : undefined);
 };
 var StoryPointsElement = exports.StoryPointsElement = function StoryPointsElement() {
   return /*#__PURE__*/_react.default.createElement(_elements.StoryPoints, null);

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

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

package/dist/es2019/__tests__/vr-tests/__snapshots__/action-lozenge/action-trigger--default--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a54da48270d4ee29edca083b504ad489927ec4ff1161b652ad4360fe471ae5e0
+size 1921

package/dist/es2019/__tests__/vr-tests/__snapshots__/flex-ui-elements/flex-ui-atlaskit-badge-view--default.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:48fb56e2f9587b60f4d0f612c2a7461db21693797621e0d8d62e8456c62535f8
-size 5010
+oid sha256:4febc55bef67ab94fd67fbe34afb8efbe728b81605ec537fb8b97cc66f78780e
+size 8404

package/dist/es2019/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-false.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bf5409f5143a160b5bb5269da8d7f6e3575c174b1edb207fb584842d7695716
-size 72911
+oid sha256:fd4ce1e874bb5cef90c294ea4d3c15691e816b1077d7309a1cbebd588cbc838b
+size 69991

package/dist/es2019/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-true.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0c112eb8de1d2c9606a8a45b6e53a30dff607faef1110f483084e53480a82cf8
-size 73353
+oid sha256:37e1a1a35f2fa0001447c300169b583c490e89a4d27f6b1e605ec516889b8deb
+size 70441

package/dist/es2019/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb6de90a1630f1cabfedf29c6abd8bf24bafb5f82597bac022bcd2e9aa4ff176
+size 26308

package/dist/es2019/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e3096d4d354e004dd2a15fd3bda5fd8ebcc79a367e15289ba57b1d7597508ca
+size 26864

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

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -72,8 +72,8 @@ const LinkInfo = ({
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: `${testId}-url`,
-        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -172,8 +172,8 @@ const LinkInfoNew = ({
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: `${testId}-url`,
-        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -1,8 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const LinkInfoButton = ({
@@ -22,15 +20,14 @@ const LinkInfoButton = ({
     hideTooltipOnClick: true,
     tag: "span",
     testId: `${testId}-tooltip`
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+  }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
-    testId: `${testId}-button`
-  }, fg('navx-2185-smart-link-preview-modal-icon-role') ? {
-    role
-  } : {})));
+    testId: `${testId}-button`,
+    role: role
+  }));
 };
 export default LinkInfoButton;

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -18,28 +18,34 @@ const styles = null;
 const BaseLozengeElement = ({
   action,
   appearance = 'default',
-  name,
   className,
+  maxWidth,
+  name,
+  onAfterChanged,
   style,
   text,
-  testId = 'smart-element-lozenge',
-  onAfterChanged
+  testId = 'smart-element-lozenge'
 }) => {
   const ui = useFlexibleUiOptionContext();
   if (!text) {
     return null;
   }
-  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, _extends({
     action: action,
-    appearance: appearance,
+    appearance: appearance
+  }, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth
+  } : undefined, {
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
     onAfterChanged: onAfterChanged
-  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
+  })) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance
   }, fg('platform-component-visual-refresh') ? {
     isBold: true
+  } : undefined, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth
   } : undefined, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -21,6 +21,7 @@ const validateItems = (items = [], text) => {
 const LozengeAction = ({
   action,
   appearance,
+  maxWidth,
   testId = 'smart-element-lozenge-action',
   text,
   zIndex,
@@ -86,10 +87,13 @@ const LozengeAction = ({
   }, [action.read, invoke, isLoaded, text, fireEvent]);
   const trigger = useCallback(props => /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
     appearance: selected.appearance,
-    isOpen: isOpen,
+    isOpen: isOpen
+  }, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth
+  } : undefined, {
     testId: testId,
     text: selected.text
-  })), [selected.appearance, selected.text, isOpen, testId]);
+  })), [selected.appearance, selected.text, isOpen, maxWidth, testId]);
   const handleItemClick = useCallback(async (id, text, appearance) => {
     try {
       fireEvent('ui.button.clicked.smartLinkStatusListItem', {});

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -13,6 +13,7 @@
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
 ._1q2vglyw[aria-expanded=true]{outline-style:none}
@@ -29,6 +30,7 @@
 ._j8b81o36[aria-expanded=true]{outline-width:medium}
 ._k48pn7od{font-weight:unset}
 ._n3tdidpf{padding-bottom:0}
+._o5721q9c{white-space:nowrap}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
 ._syazn7od{color:unset}

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.js

@@ -18,11 +18,13 @@ const styles = {
   lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
   lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
 };
+const textStyles = null;
 const triggerLozengeStyles = null;
 const triggerButtonStyles = null;
 const LozengeActionTrigger = ({
   appearance,
   isOpen,
+  maxWidth,
   testId,
   text,
   triggerRef,
@@ -57,18 +59,22 @@ const LozengeActionTrigger = ({
     return /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
       as: "span"
-    }, /*#__PURE__*/React.createElement(Lozenge, {
+    }, /*#__PURE__*/React.createElement(Lozenge, _extends({
       appearance: appearance,
       isBold: fg('platform-component-visual-refresh') ? true : isHovering
+    }, fg('platform_navx_sl_lozenge_max_width') ? {
+      maxWidth
+    } : undefined, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
       style: {
         backgroundColor: lozengeBackgroundColor,
         color: lozengeForegroundColor
       }
-    }, /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: ax(["_4cvr1h6o _1e0c1txw"])
-    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ax([fg('platform_navx_sl_lozenge_max_width') && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+    }, text), /*#__PURE__*/React.createElement(Box, {
       as: "span",
       xcss: styles.chevronDown
     }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
@@ -77,12 +83,15 @@ const LozengeActionTrigger = ({
       size: "small",
       "aria-hidden": true
     })))));
-  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, props, {
     "data-action-open": isOpen,
-    "data-testid": `${testId}--trigger`
+    "data-testid": `${testId}--trigger`,
+    style: {
+      maxWidth: fg('platform_navx_sl_lozenge_max_width') ? maxWidth : undefined
+    }
     // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseEnter: onMouseEnter

package/dist/es2019/view/FlexibleCard/external.js

@@ -8,6 +8,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * DO NOT add a new prop to these components until we are ready to support it externally.
  */
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../constants';
 import { CopyLinkAction as CopyLinkActionComponent, CustomAction as CustomActionComponent, DownloadAction as DownloadActionComponent, FollowAction as FollowActionComponent, PreviewAction as PreviewActionComponent, UnresolvedAction as UnresolvedActionComponent } from './components/actions';
 import { AssignedTo, AssignedToGroup, AttachmentCount, AuthorGroup, ChecklistProgress, CollaboratorGroup, CommentCount, CreatedBy, CreatedOn, DueOn, LatestCommit, LinkIcon, Location, ModifiedBy, ModifiedOn, OwnedBy, OwnedByGroup, Preview, Priority, ProgrammingLanguage, Provider, ReactCount, ReadTime, SentOn, Snippet, SourceBranch, State, StoryPoints, SubscriberCount, SubTasksProgress, TargetBranch, Title, ViewCount, VoteCount } from './components/elements';
@@ -80,7 +81,9 @@ export const SnippetElement = props => /*#__PURE__*/React.createElement(Snippet,
   content: props === null || props === void 0 ? void 0 : props.text
 });
 export const SourceBranchElement = () => /*#__PURE__*/React.createElement(SourceBranch, null);
-export const StateElement = () => /*#__PURE__*/React.createElement(State, null);
+export const StateElement = props => /*#__PURE__*/React.createElement(State, fg('platform_navx_sl_lozenge_max_width') ? {
+  maxWidth: props === null || props === void 0 ? void 0 : props.maxWidth
+} : undefined);
 export const StoryPointsElement = () => /*#__PURE__*/React.createElement(StoryPoints, null);
 export const SubscriberCountElement = () => /*#__PURE__*/React.createElement(SubscriberCount, null);
 export const SubTasksProgressElement = () => /*#__PURE__*/React.createElement(SubTasksProgress, null);

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

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

package/dist/esm/__tests__/vr-tests/__snapshots__/action-lozenge/action-trigger--default--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a54da48270d4ee29edca083b504ad489927ec4ff1161b652ad4360fe471ae5e0
+size 1921

package/dist/esm/__tests__/vr-tests/__snapshots__/flex-ui-elements/flex-ui-atlaskit-badge-view--default.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:48fb56e2f9587b60f4d0f612c2a7461db21693797621e0d8d62e8456c62535f8
-size 5010
+oid sha256:4febc55bef67ab94fd67fbe34afb8efbe728b81605ec537fb8b97cc66f78780e
+size 8404

package/dist/esm/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-false.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bf5409f5143a160b5bb5269da8d7f6e3575c174b1edb207fb584842d7695716
-size 72911
+oid sha256:fd4ce1e874bb5cef90c294ea4d3c15691e816b1077d7309a1cbebd588cbc838b
+size 69991

package/dist/esm/__tests__/vr-tests/__snapshots__/flexible-card/flexible-ui-element-badge--default--navx-1895-new-logo-design-true.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0c112eb8de1d2c9606a8a45b6e53a30dff607faef1110f483084e53480a82cf8
-size 73353
+oid sha256:37e1a1a35f2fa0001447c300169b583c490e89a4d27f6b1e605ec516889b8deb
+size 70441

package/dist/esm/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb6de90a1630f1cabfedf29c6abd8bf24bafb5f82597bac022bcd2e9aa4ff176
+size 26308

package/dist/esm/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode--platform-navx-sl-lozenge-max-width-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e3096d4d354e004dd2a15fd3bda5fd8ebcc79a367e15289ba57b1d7597508ca
+size 26864

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

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -73,8 +73,8 @@ var LinkInfo = function LinkInfo(_ref) {
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: "".concat(testId, "-url"),
-        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);
@@ -178,8 +178,8 @@ var LinkInfoNew = function LinkInfoNew(_ref2) {
         label: messages.viewOriginal,
         onClick: onViewButtonClick,
         testId: "".concat(testId, "-url"),
-        role: fg('navx-2185-smart-link-preview-modal-icon-role') ? 'link' : '',
-        "aria-label": fg('navx-2185-smart-link-preview-modal-icon-role') ? messages.viewOriginal : ''
+        role: 'link',
+        "aria-label": messages.viewOriginal
       });
     }
   }, [onViewButtonClick, providerName, testId]);

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -1,8 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 var LinkInfoButton = function LinkInfoButton(_ref) {
@@ -20,15 +18,14 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     hideTooltipOnClick: true,
     tag: "span",
     testId: "".concat(testId, "-tooltip")
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+  }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     icon: icon,
     label: formatMessage(label),
     onClick: onClick,
     onMouseDown: onMouseDown,
-    testId: "".concat(testId, "-button")
-  }, fg('navx-2185-smart-link-preview-modal-icon-role') ? {
+    testId: "".concat(testId, "-button"),
     role: role
-  } : {})));
+  }));
 };
 export default LinkInfoButton;

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/index.js

@@ -19,28 +19,34 @@ var BaseLozengeElement = function BaseLozengeElement(_ref) {
   var action = _ref.action,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    name = _ref.name,
     className = _ref.className,
+    maxWidth = _ref.maxWidth,
+    name = _ref.name,
+    onAfterChanged = _ref.onAfterChanged,
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId,
-    onAfterChanged = _ref.onAfterChanged;
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
   var ui = useFlexibleUiOptionContext();
   if (!text) {
     return null;
   }
-  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, _extends({
     action: action,
-    appearance: appearance,
+    appearance: appearance
+  }, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: maxWidth
+  } : undefined, {
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex,
     onAfterChanged: onAfterChanged
-  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
+  })) : /*#__PURE__*/React.createElement(AtlaskitLozenge, _extends({
     appearance: appearance
   }, fg('platform-component-visual-refresh') ? {
     isBold: true
+  } : undefined, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: maxWidth
   } : undefined, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/index.js

@@ -29,6 +29,7 @@ var LozengeAction = function LozengeAction(_ref) {
   var _action$update;
   var action = _ref.action,
     appearance = _ref.appearance,
+    maxWidth = _ref.maxWidth,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
     text = _ref.text,
@@ -137,11 +138,14 @@ var LozengeAction = function LozengeAction(_ref) {
   var trigger = useCallback(function (props) {
     return /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
       appearance: selected.appearance,
-      isOpen: isOpen,
+      isOpen: isOpen
+    }, fg('platform_navx_sl_lozenge_max_width') ? {
+      maxWidth: maxWidth
+    } : undefined, {
       testId: testId,
       text: selected.text
     }));
-  }, [selected.appearance, selected.text, isOpen, testId]);
+  }, [selected.appearance, selected.text, isOpen, maxWidth, testId]);
   var handleItemClick = useCallback( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, text, appearance) {
       var updateAction, request;

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -13,6 +13,7 @@
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
 ._1q2vglyw[aria-expanded=true]{outline-style:none}
@@ -29,6 +30,7 @@
 ._j8b81o36[aria-expanded=true]{outline-width:medium}
 ._k48pn7od{font-weight:unset}
 ._n3tdidpf{padding-bottom:0}
+._o5721q9c{white-space:nowrap}
 ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
 ._syazn7od{color:unset}

package/dist/esm/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "maxWidth", "testId", "text", "triggerRef"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -21,11 +21,13 @@ var styles = {
   lozengeContainer: "_kkk2n7od _2rko12b0 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
   lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1v1w"
 };
+var textStyles = null;
 var triggerLozengeStyles = null;
 var triggerButtonStyles = null;
 var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
+    maxWidth = _ref.maxWidth,
     testId = _ref.testId,
     text = _ref.text,
     triggerRef = _ref.triggerRef,
@@ -79,18 +81,22 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     return /*#__PURE__*/React.createElement(Box, {
       xcss: cx(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
       as: "span"
-    }, /*#__PURE__*/React.createElement(Lozenge, {
+    }, /*#__PURE__*/React.createElement(Lozenge, _extends({
       appearance: appearance,
       isBold: fg('platform-component-visual-refresh') ? true : isHovering
+    }, fg('platform_navx_sl_lozenge_max_width') ? {
+      maxWidth: maxWidth
+    } : undefined, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
       style: {
         backgroundColor: lozengeBackgroundColor,
         color: lozengeForegroundColor
       }
-    }, /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: ax(["_4cvr1h6o _1e0c1txw"])
-    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ax([fg('platform_navx_sl_lozenge_max_width') && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+    }, text), /*#__PURE__*/React.createElement(Box, {
       as: "span",
       xcss: styles.chevronDown
     }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
@@ -99,12 +105,15 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
       size: "small",
       "aria-hidden": true
     })))));
-  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor, maxWidth]);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, props, {
     "data-action-open": isOpen,
-    "data-testid": "".concat(testId, "--trigger")
+    "data-testid": "".concat(testId, "--trigger"),
+    style: {
+      maxWidth: fg('platform_navx_sl_lozenge_max_width') ? maxWidth : undefined
+    }
     // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseEnter: onMouseEnter

package/dist/esm/view/FlexibleCard/external.js

@@ -8,6 +8,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * DO NOT add a new prop to these components until we are ready to support it externally.
  */
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../constants';
 import { CopyLinkAction as CopyLinkActionComponent, CustomAction as CustomActionComponent, DownloadAction as DownloadActionComponent, FollowAction as FollowActionComponent, PreviewAction as PreviewActionComponent, UnresolvedAction as UnresolvedActionComponent } from './components/actions';
 import { AssignedTo, AssignedToGroup, AttachmentCount, AuthorGroup, ChecklistProgress, CollaboratorGroup, CommentCount, CreatedBy, CreatedOn, DueOn, LatestCommit, LinkIcon, Location, ModifiedBy, ModifiedOn, OwnedBy, OwnedByGroup, Preview, Priority, ProgrammingLanguage, Provider, ReactCount, ReadTime, SentOn, Snippet, SourceBranch, State, StoryPoints, SubscriberCount, SubTasksProgress, TargetBranch, Title, ViewCount, VoteCount } from './components/elements';
@@ -118,8 +119,10 @@ export var SnippetElement = function SnippetElement(props) {
 export var SourceBranchElement = function SourceBranchElement() {
   return /*#__PURE__*/React.createElement(SourceBranch, null);
 };
-export var StateElement = function StateElement() {
-  return /*#__PURE__*/React.createElement(State, null);
+export var StateElement = function StateElement(props) {
+  return /*#__PURE__*/React.createElement(State, fg('platform_navx_sl_lozenge_max_width') ? {
+    maxWidth: props === null || props === void 0 ? void 0 : props.maxWidth
+  } : undefined);
 };
 export var StoryPointsElement = function StoryPointsElement() {
   return /*#__PURE__*/React.createElement(StoryPoints, null);

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

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

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
+import { type LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { type ActionName, type ElementName, type SmartLinkDirection, type SmartLinkSize } from '../../../../constants';
 import { type ActionProps } from '../actions/action/types';
 import type { AssignedToGroupElementProps } from '../elements/assigned-to-group-element';
@@ -389,7 +390,7 @@ export type SourceBranch = {
 export type State = {
     name: ElementName.State;
     onAfterChanged?: () => void;
-};
+} & Pick<AtlaskitLozengeProps, 'maxWidth'>;
 /**
  * Represents the props available for a SubscriberCount element.
  * @see SubscriberCount

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/index.d.ts

@@ -15,21 +15,17 @@ export type BaseLozengeElementProps = ElementProps & {
      * Callback fired after lozenge value has changed
      */
     onAfterChanged?: () => void;
-    /**
-     * Determines the custom styles of the Atlaskit lozenge.
-     */
-    style?: AtlaskitLozengeProps['style'];
     /**
      * The text to display within the lozenge.
      */
     text?: string | React.ReactNode;
-};
+} & Pick<AtlaskitLozengeProps, 'maxWidth' | 'style'>;
 /**
  * A base element that displays a Lozenge.
  * @internal
  * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, onAfterChanged, }: BaseLozengeElementProps) => JSX.Element | null;
+declare const BaseLozengeElement: ({ action, appearance, className, maxWidth, name, onAfterChanged, style, text, testId, }: BaseLozengeElementProps) => JSX.Element | null;
 export default BaseLozengeElement;
 export declare const toDateLozengeProps: (dateString?: string) => Partial<BaseLozengeElementProps> | undefined;

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.d.ts

@@ -1,3 +1,3 @@
 import { type LozengeActionTriggerProps } from './type';
-declare const LozengeActionTrigger: ({ appearance, isOpen, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
+declare const LozengeActionTrigger: ({ appearance, isOpen, maxWidth, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
 export default LozengeActionTrigger;

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -1,8 +1,8 @@
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
-import type { ThemeAppearance } from '@atlaskit/lozenge';
+import type { LozengeProps, ThemeAppearance } from '@atlaskit/lozenge';
 export type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
     isOpen?: boolean;
     testId?: string;
     text: string | React.ReactNode;
-} & CustomTriggerProps<HTMLButtonElement>;
+} & Pick<LozengeProps, 'maxWidth'> & CustomTriggerProps<HTMLButtonElement>;

package/dist/types/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/types.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeAppearance } from '@atlaskit/lozenge';
+import { type LozengeProps, type ThemeAppearance } from '@atlaskit/lozenge';
 import type { LinkLozengeInvokeActions } from '../../../../../../../extractors/common/lozenge/types';
 export type LozengeItem = {
     appearance?: ThemeAppearance;
@@ -12,4 +12,4 @@ export type LozengeActionProps = {
     testId?: string;
     text: string | React.ReactNode;
     zIndex?: number;
-};
+} & Pick<LozengeProps, 'maxWidth'>;

package/dist/types/view/FlexibleCard/external.d.ts

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import type { Prettify } from '@atlaskit/linking-common';
-import { CommentCount, LinkIcon, ModifiedOn, OwnedBy, OwnedByGroup, Preview, ReactCount, Snippet, Title } from './components/elements';
+import { CommentCount, LinkIcon, ModifiedOn, OwnedBy, OwnedByGroup, Preview, ReactCount, Snippet, State, Title } from './components/elements';
 export declare const AssignedToElement: () => React.JSX.Element;
 export declare const AssignedToGroupElement: () => React.JSX.Element;
 export declare const AttachmentCountElement: () => React.JSX.Element;
@@ -49,7 +49,8 @@ export type SnippetElementProps = Prettify<Pick<React.ComponentProps<typeof Snip
 }>;
 export declare const SnippetElement: (props?: SnippetElementProps) => React.JSX.Element;
 export declare const SourceBranchElement: () => React.JSX.Element;
-export declare const StateElement: () => React.JSX.Element;
+export type StateElementProps = Prettify<Pick<React.ComponentProps<typeof State>, 'maxWidth'>>;
+export declare const StateElement: (props?: StateElementProps) => React.JSX.Element;
 export declare const StoryPointsElement: () => React.JSX.Element;
 export declare const SubscriberCountElement: () => React.JSX.Element;
 export declare const SubTasksProgressElement: () => React.JSX.Element;

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

@@ -1,4 +1,5 @@
 import { type ReactNode, type Ref } from 'react';
+import { type LozengeProps as AtlaskitLozengeProps } from '@atlaskit/lozenge';
 import { type ActionName, type ElementName, type SmartLinkDirection, type SmartLinkSize } from '../../../../constants';
 import { type ActionProps } from '../actions/action/types';
 import type { AssignedToGroupElementProps } from '../elements/assigned-to-group-element';
@@ -389,7 +390,7 @@ export type SourceBranch = {
 export type State = {
     name: ElementName.State;
     onAfterChanged?: () => void;
-};
+} & Pick<AtlaskitLozengeProps, 'maxWidth'>;
 /**
  * Represents the props available for a SubscriberCount element.
  * @see SubscriberCount

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/index.d.ts

@@ -15,21 +15,17 @@ export type BaseLozengeElementProps = ElementProps & {
      * Callback fired after lozenge value has changed
      */
     onAfterChanged?: () => void;
-    /**
-     * Determines the custom styles of the Atlaskit lozenge.
-     */
-    style?: AtlaskitLozengeProps['style'];
     /**
      * The text to display within the lozenge.
      */
     text?: string | React.ReactNode;
-};
+} & Pick<AtlaskitLozengeProps, 'maxWidth' | 'style'>;
 /**
  * A base element that displays a Lozenge.
  * @internal
  * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-declare const BaseLozengeElement: ({ action, appearance, name, className, style, text, testId, onAfterChanged, }: BaseLozengeElementProps) => JSX.Element | null;
+declare const BaseLozengeElement: ({ action, appearance, className, maxWidth, name, onAfterChanged, style, text, testId, }: BaseLozengeElementProps) => JSX.Element | null;
 export default BaseLozengeElement;
 export declare const toDateLozengeProps: (dateString?: string) => Partial<BaseLozengeElementProps> | undefined;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.d.ts

@@ -1,3 +1,3 @@
 import { type LozengeActionTriggerProps } from './type';
-declare const LozengeActionTrigger: ({ appearance, isOpen, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
+declare const LozengeActionTrigger: ({ appearance, isOpen, maxWidth, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
 export default LozengeActionTrigger;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -1,8 +1,8 @@
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
-import type { ThemeAppearance } from '@atlaskit/lozenge';
+import type { LozengeProps, ThemeAppearance } from '@atlaskit/lozenge';
 export type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
     isOpen?: boolean;
     testId?: string;
     text: string | React.ReactNode;
-} & CustomTriggerProps<HTMLButtonElement>;
+} & Pick<LozengeProps, 'maxWidth'> & CustomTriggerProps<HTMLButtonElement>;

package/dist/types-ts4.5/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/types.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeAppearance } from '@atlaskit/lozenge';
+import { type LozengeProps, type ThemeAppearance } from '@atlaskit/lozenge';
 import type { LinkLozengeInvokeActions } from '../../../../../../../extractors/common/lozenge/types';
 export type LozengeItem = {
     appearance?: ThemeAppearance;
@@ -12,4 +12,4 @@ export type LozengeActionProps = {
     testId?: string;
     text: string | React.ReactNode;
     zIndex?: number;
-};
+} & Pick<LozengeProps, 'maxWidth'>;

package/dist/types-ts4.5/view/FlexibleCard/external.d.ts

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import type { Prettify } from '@atlaskit/linking-common';
-import { CommentCount, LinkIcon, ModifiedOn, OwnedBy, OwnedByGroup, Preview, ReactCount, Snippet, Title } from './components/elements';
+import { CommentCount, LinkIcon, ModifiedOn, OwnedBy, OwnedByGroup, Preview, ReactCount, Snippet, State, Title } from './components/elements';
 export declare const AssignedToElement: () => React.JSX.Element;
 export declare const AssignedToGroupElement: () => React.JSX.Element;
 export declare const AttachmentCountElement: () => React.JSX.Element;
@@ -49,7 +49,8 @@ export type SnippetElementProps = Prettify<Pick<React.ComponentProps<typeof Snip
 }>;
 export declare const SnippetElement: (props?: SnippetElementProps) => React.JSX.Element;
 export declare const SourceBranchElement: () => React.JSX.Element;
-export declare const StateElement: () => React.JSX.Element;
+export type StateElementProps = Prettify<Pick<React.ComponentProps<typeof State>, 'maxWidth'>>;
+export declare const StateElement: (props?: StateElementProps) => React.JSX.Element;
 export declare const StoryPointsElement: () => React.JSX.Element;
 export declare const SubscriberCountElement: () => React.JSX.Element;
 export declare const SubTasksProgressElement: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.20.8",
+	"version": "43.21.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -72,8 +72,8 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tile": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.26.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.28.0",
+		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -99,7 +99,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/analytics-listeners": "^9.2.0",
+		"@atlaskit/analytics-listeners": "^9.3.0",
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/media-test-helpers": "^39.0.0",
 		"@atlaskit/ssr": "workspace:^",
@@ -228,6 +228,9 @@
 		"platform_navx_sl_a11y_embed_modal": {
 			"type": "boolean"
 		},
+		"platform_navx_sl_lozenge_max_width": {
+			"type": "boolean"
+		},
 		"platform_navx_send_context_to_ugs_for_rel_links": {
 			"type": "boolean"
 		},
@@ -237,9 +240,6 @@
 		"navx-2811-smart-link-a11y-image-alt": {
 			"type": "boolean"
 		},
-		"navx-2185-smart-link-preview-modal-icon-role": {
-			"type": "boolean"
-		},
 		"ufo_hold_flexible_card": {
 			"type": "boolean"
 		}

package/dist/cjs/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:06fc246199845cb6955798c3a7b09133f1239e4171f58973bb0532e9cffb6ee0
-size 16950

package/dist/es2019/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:06fc246199845cb6955798c3a7b09133f1239e4171f58973bb0532e9cffb6ee0
-size 16950

package/dist/esm/__tests__/vr-tests/__snapshots__/flexible-card/flexibleuielementlozenge--light-mode.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:06fc246199845cb6955798c3a7b09133f1239e4171f58973bb0532e9cffb6ee0
-size 16950