@atlaskit/smart-card 38.3.0 → 38.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 38.4.0
+
+### Minor Changes
+
+- [#157647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157647)
+  [`dad03e6a309bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dad03e6a309bb) -
+  Refactor FlexibleCard element directory
+
 ## 38.3.0
 
 ### Minor Changes

package/compass.yml

@@ -19,23 +19,11 @@ links:
   - name: '#help-twg-linking-platform'
     type: CHAT_CHANNEL
     url: 'https://atlassian.enterprise.slack.com/archives/CFKGAQZRV'
-  - name: 'On-Call Schedule'
+  - name: null
     type: ON_CALL
     url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/b9c8b313-dd6d-4a41-8eeb-d7a9df55be9d'
   - name: source code
     type: REPOSITORY
     url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/linking-platform/smart-card'
-customFields:
-  - name: 'FinOps_COGS_Cost_Center'
-    type: single_select
-    value: 'a681c808-9c58-45e5-9b3a-b5cc330c4b3a'
-  - name: 'FinOps_R&D_Cost_Center'
-    type: single_select
-    value: 'd9c71b12-1c77-4c68-a769-ba0e26bc8cac'
-  - name: 'FinOps_Service_Group'
-    type: single_select
-    value: '9120e03c-440b-489d-ac42-07903a2c611d'
-  - name: 'business-unit'
-    type: text
-    value: 'Eng - X Product Collab'
+customFields: []
 relationships: {}

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

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

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
 var _messages = require("../../../messages");
-var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _baseTextElement = _interopRequireDefault(require("../../FlexibleCard/components/elements/common/base-text-element"));
 var _RetryAction = require("../actions/RetryAction");
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
@@ -39,7 +39,7 @@ var ErroredView = function ErroredView(_ref) {
     color: "var(--ds-icon-warning, #E56910)",
     LEGACY_size: "small",
     testId: "".concat(testId, "-warning-icon")
-  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+  }), /*#__PURE__*/_react.default.createElement(_baseTextElement.default, {
     maxLines: 3,
     message: {
       descriptor: _messages.messages.could_not_load_link

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

@@ -25,7 +25,7 @@ var _extractHostname = _interopRequireDefault(require("../../../extractors/commo
 var _messages = require("../../../messages");
 var _intlUtils = require("../../../utils/intl-utils");
 var _jsonld = require("../../../utils/jsonld");
-var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _baseTextElement = _interopRequireDefault(require("../../FlexibleCard/components/elements/common/base-text-element"));
 var _ForbiddenAction = require("../actions/ForbiddenAction");
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
@@ -98,7 +98,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     LEGACY_fallbackIcon: _lock.default,
     LEGACY_size: "small",
     testId: "".concat(testId, "-lock-icon")
-  }), /*#__PURE__*/React.createElement(_text.default, {
+  }), /*#__PURE__*/React.createElement(_baseTextElement.default, {
     maxLines: 3,
     message: {
       descriptor: (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),

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

@@ -19,7 +19,7 @@ var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = require("../../../messages");
-var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _baseTextElement = _interopRequireDefault(require("../../FlexibleCard/components/elements/common/base-text-element"));
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _excluded = ["testId"];
@@ -63,7 +63,7 @@ var NotFoundView = function NotFoundView(_ref) {
     LEGACY_fallbackIcon: _lock.default,
     LEGACY_size: "small",
     testId: "".concat(testId, "-lock-icon")
-  }), /*#__PURE__*/React.createElement(_text.default, {
+  }), /*#__PURE__*/React.createElement(_baseTextElement.default, {
     message: description,
     testId: "".concat(testId, "-message"),
     maxLines: 3,

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

@@ -15,7 +15,7 @@ var _tokens = require("@atlaskit/tokens");
 var _constants = require("../../constants");
 var _useInvokeClientAction = _interopRequireDefault(require("../../state/hooks/use-invoke-client-action"));
 var _utils = require("../../utils");
-var _icon = _interopRequireDefault(require("../FlexibleCard/components/elements/icon"));
+var _iconElement = _interopRequireDefault(require("../FlexibleCard/components/elements/icon-element"));
 var _analytics = _interopRequireDefault(require("./components/analytics"));
 var _embedContent = _interopRequireDefault(require("./components/embed-content"));
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
@@ -114,7 +114,7 @@ var EmbedModal = function EmbedModal(_ref) {
     label: title
   } : {}), /*#__PURE__*/_react.default.createElement(_linkInfo.default, {
     icon: linkIcon && {
-      icon: /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, linkIcon, {
+      icon: /*#__PURE__*/_react.default.createElement(_iconElement.default, (0, _extends2.default)({}, linkIcon, {
         size: _constants.SmartLinkSize.Large
       })),
       isFlexibleUi: true

package/dist/cjs/view/FlexibleCard/components/elements/{applied-to-components-count → applied-to-components-count-element}/index.js

@@ -12,10 +12,10 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _badge = _interopRequireDefault(require("../badge"));
+var _common = require("../common");
 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 AppliedToComponentsCount = function AppliedToComponentsCount(props) {
+var AppliedToComponentsCountElement = function AppliedToComponentsCountElement(props) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
@@ -27,9 +27,9 @@ var AppliedToComponentsCount = function AppliedToComponentsCount(props) {
   var label = formatMessage(_messages.messages.compass_applied_components_count, {
     numberOfComponents: context.appliedToComponentsCount
   });
-  return /*#__PURE__*/_react.default.createElement(_badge.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_common.BaseBadgeElement, (0, _extends2.default)({
     icon: _constants.IconType.Component,
     label: label
   }, props));
 };
-var _default = exports.default = AppliedToComponentsCount;
+var _default = exports.default = AppliedToComponentsCountElement;

package/dist/cjs/view/FlexibleCard/components/elements/{atlaskit-badge → atlaskit-badge-element}/index.js

@@ -25,7 +25,7 @@ var badgeStyles = null;
  * @see StoryPoints
  * */
 
-var AtlaskitBadge = function AtlaskitBadge(_ref) {
+var AtlaskitElementBadge = function AtlaskitElementBadge(_ref) {
   var value = _ref.value,
     name = _ref.name,
     className = _ref.className,
@@ -43,4 +43,4 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
     className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
   }), /*#__PURE__*/React.createElement(_badge.default, null, value));
 };
-var _default = exports.default = AtlaskitBadge;
+var _default = exports.default = AtlaskitElementBadge;

package/dist/cjs/view/FlexibleCard/components/elements/{avatar-group → common/base-avatar-group-element}/index.js

@@ -16,14 +16,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _constants = require("../../../../../constants");
-var _messages = require("../../../../../messages");
-var _utils = require("../../utils");
+var _constants = require("../../../../../../constants");
+var _messages = require("../../../../../../messages");
+var _utils = require("../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MAX_COUNT = 4;
 var styles = null;
 var stylesMap = {
   xlarge: "_1e0c116y _1kvxu2gc _102oidpf",
@@ -43,19 +42,18 @@ var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, pers
       return personName;
   }
 };
-
 /**
  * A base element that displays a group of avatars.
  * @internal
- * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @param {BaseAvatarGroupElementProps} BaseAvatarGroupElementProps - The props necessary for the AvatarGroup.
  * @see AuthorGroup
  * @see CollaboratorGroup
  */
-var AvatarGroup = function AvatarGroup(_ref) {
+var BaseAvatarGroup = function BaseAvatarGroup(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$maxCount = _ref.maxCount,
-    maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+    maxCount = _ref$maxCount === void 0 ? 4 : _ref$maxCount,
     name = _ref.name,
     className = _ref.className,
     _ref$size = _ref.size,
@@ -107,4 +105,4 @@ var AvatarGroup = function AvatarGroup(_ref) {
     testId: testId
   }));
 };
-var _default = exports.default = AvatarGroup;
+var _default = exports.default = BaseAvatarGroup;

package/dist/cjs/view/FlexibleCard/components/elements/{badge → common/base-badge-element}/index.js

@@ -12,14 +12,15 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _linkingCommon = require("@atlaskit/linking-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _constants = require("../../../../../constants");
-var _messages = require("../../../../../messages");
-var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
-var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
-var _withOverrideCss = require("../../common/with-override-css");
-var _utils = require("../../utils");
+var _constants = require("../../../../../../constants");
+var _messages = require("../../../../../../messages");
+var _atlaskitIcon = _interopRequireDefault(require("../../../common/atlaskit-icon"));
+var _imageIcon = _interopRequireDefault(require("../../../common/image-icon"));
+var _withOverrideCss = require("../../../common/with-override-css");
+var _utils = require("../../../utils");
 var _messageMapper;
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 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); }
@@ -66,11 +67,10 @@ var renderImageIcon = function renderImageIcon(url, testId) {
     });
   }
 };
-
 /**
  * A base element that displays some text with an associated icon.
  * @internal
- * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @param {BaseBadgeElementProps} BaseBadgeElementProps - The props necessary for the Badge.
  * @see CommentCount
  * @see ViewCount
  * @see ReactCount
@@ -80,7 +80,7 @@ var renderImageIcon = function renderImageIcon(url, testId) {
  * @see ProgrammingLanguage
  * @see Provider
  */
-var BadgeRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var BaseBadgeRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$hideIcon = _ref.hideIcon,
@@ -117,8 +117,8 @@ var BadgeRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 });
 
 // On cleanup of platform-linking-visual-refresh-v1, this should become
-// export default withOverrideCss(Badge);
-var BadgeRefreshNewWithOverrideCss = (0, _withOverrideCss.withOverrideCss)(BadgeRefreshNew);
+// export default withOverrideCss(BaseBadgeElement);
+var BaseBadgeElementRefreshNewWithOverrideCss = (0, _withOverrideCss.withOverrideCss)(BaseBadgeRefreshNew);
 
 /**
  * A base element that displays some text with an associated icon.
@@ -133,7 +133,7 @@ var BadgeRefreshNewWithOverrideCss = (0, _withOverrideCss.withOverrideCss)(Badge
  * @see ProgrammingLanguage
  * @see Provider
  */
-var BadgeCompiledNew = function BadgeCompiledNew(_ref2) {
+var BaseBadgeElementCompiledNew = function BaseBadgeElementCompiledNew(_ref2) {
   var _ref2$hideIcon = _ref2.hideIcon,
     hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
     icon = _ref2.icon,
@@ -162,11 +162,6 @@ var BadgeCompiledNew = function BadgeCompiledNew(_ref2) {
     className: (0, _runtime.ax)(["_11c8dcr7 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
-var Badge = function Badge(props) {
-  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/_react.default.createElement(BadgeRefreshNewWithOverrideCss, props);
-  } else {
-    return /*#__PURE__*/_react.default.createElement(BadgeCompiledNew, props);
-  }
-};
-var _default = exports.default = Badge;
+var _default = exports.default = (0, _linkingCommon.withFeatureFlaggedComponent)(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, function () {
+  return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1');
+});

package/dist/cjs/view/FlexibleCard/components/elements/{date-time → common/base-date-time-element}/index.js

@@ -14,7 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _intlUtils = require("@formatjs/intl-utils");
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _messages = require("../../../../../messages");
+var _messages = require("../../../../../../messages");
 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; }
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
@@ -34,16 +34,15 @@ var typeToDescriptorMap = {
     absolute: _messages.messages.sent_on_absolute
   }
 };
-
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
- * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @param {BaseDateTimeProps} BaseDateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
  * @see SentOn
  */
-var DateTime = function DateTime(_ref) {
+var BaseDateTimeElement = function BaseDateTimeElement(_ref) {
   var date = _ref.date,
     name = _ref.name,
     className = _ref.className,
@@ -104,4 +103,4 @@ var DateTime = function DateTime(_ref) {
     className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_11c8dcr7 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_11c81o8v _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k7vkz", className])
   }, content);
 };
-var _default = exports.default = DateTime;
+var _default = exports.default = BaseDateTimeElement;

package/dist/cjs/view/FlexibleCard/components/elements/{link → common/base-link-element}/index.js

@@ -12,9 +12,9 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _constants = require("../../../../../constants");
-var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-var _utils = require("../../utils");
+var _constants = require("../../../../../../constants");
+var _useLinkClicked = require("../../../../../../state/analytics/useLinkClicked");
+var _utils = require("../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @compiled/shorthand-property-sorting */
@@ -72,14 +72,13 @@ var themeStyleMap = {
   black: "_syaz1gjq _9oik1r31 _1bnx8stv _jf4cnqa1 _30l31gjq _9h8h1fxt",
   link: "_syaz14q2 _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
 };
-
 /**
  * A base element that represent an anchor.
  * @internal
- * @param {LinkProps} LinkProps - The props necessary for the Link element.
+ * @param {BaseLinkElementProps} BaseLinkElementProps - The props necessary for the Link element.
  * @see LinkIcon
  */
-var Link = function Link(_ref) {
+var BaseLinkElement = function BaseLinkElement(_ref) {
   var hideTooltip = _ref.hideTooltip,
     _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
@@ -119,4 +118,4 @@ var Link = function Link(_ref) {
     className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-var _default = exports.default = Link;
+var _default = exports.default = BaseLinkElement;

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

@@ -14,20 +14,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _lozengeAction = _interopRequireDefault(require("./lozenge-action"));
 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 stylesOld = null;
 var styles = null;
-
 /**
  * A base element that displays a Lozenge.
  * @internal
- * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-var Lozenge = function Lozenge(_ref) {
+var BaseLozengeElement = function BaseLozengeElement(_ref) {
   var action = _ref.action,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
@@ -65,4 +64,4 @@ var Lozenge = function Lozenge(_ref) {
     className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41kw7", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c116y _1ul91ns9", className])
   }), lozenge);
 };
-var _default = exports.default = Lozenge;
+var _default = exports.default = BaseLozengeElement;

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

@@ -13,13 +13,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _useAnalyticsEvents2 = require("../../../../../../common/analytics/generated/use-analytics-events");
-var _extractLozengeActionItems = _interopRequireDefault(require("../../../../../../extractors/action/extract-lozenge-action-items"));
-var _useInvoke = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke"));
-var _utils = require("../../../../../../state/hooks/use-invoke/utils");
-var _useResolve = _interopRequireDefault(require("../../../../../../state/hooks/use-resolve"));
-var _createStatusUpdateRequest = _interopRequireDefault(require("../../../../../../utils/actions/create-status-update-request"));
-var _analytics = require("../../../../../../utils/analytics/analytics");
+var _useAnalyticsEvents2 = require("../../../../../../../common/analytics/generated/use-analytics-events");
+var _extractLozengeActionItems = _interopRequireDefault(require("../../../../../../../extractors/action/extract-lozenge-action-items"));
+var _useInvoke = _interopRequireDefault(require("../../../../../../../state/hooks/use-invoke"));
+var _utils = require("../../../../../../../state/hooks/use-invoke/utils");
+var _useResolve = _interopRequireDefault(require("../../../../../../../state/hooks/use-resolve"));
+var _createStatusUpdateRequest = _interopRequireDefault(require("../../../../../../../utils/actions/create-status-update-request"));
+var _analytics = require("../../../../../../../utils/analytics/analytics");
 var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
 var _lozengeActionAnalytics = require("./lozenge-action-analytics");
 var _lozengeActionError = _interopRequireDefault(require("./lozenge-action-error"));

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

@@ -16,10 +16,10 @@ var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _useAnalyticsEvents2 = require("../../../../../../../common/analytics/generated/use-analytics-events");
-var _messages = require("../../../../../../../messages");
-var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../../state/hooks/use-invoke-client-action"));
-var _utils = require("../../../../utils");
+var _useAnalyticsEvents2 = require("../../../../../../../../common/analytics/generated/use-analytics-events");
+var _messages = require("../../../../../../../../messages");
+var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../../../state/hooks/use-invoke-client-action"));
+var _utils = require("../../../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var MAX_LINE_NUMBER = 8;

package/dist/cjs/view/FlexibleCard/components/elements/{lozenge → common/base-lozenge-element}/lozenge-action/lozenge-action-error/types.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LozengeActionErrorMessages = void 0;
-var _messages = require("../../../../../../../messages");
+var _messages = require("../../../../../../../../messages");
 var LozengeActionErrorMessages = exports.LozengeActionErrorMessages = {
   noData: {
     descriptor: _messages.messages['status_change_permission_error']

package/dist/cjs/view/FlexibleCard/components/elements/{text → common/base-text-element}/index.js

@@ -5,25 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BaseTextElement = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _utils = require("../../utils");
+var _utils = require("../../../utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var baseStyleOld = null;
 var baseStyle = null;
-
 /**
  * A base element that displays some Text.
  * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-var Text = function Text(_ref) {
+var BaseTextElement = exports.BaseTextElement = function BaseTextElement(_ref) {
   var content = _ref.content,
     _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
@@ -56,4 +55,4 @@ var Text = function Text(_ref) {
     }
   }, (0, _platformFeatureFlags.fg)('platform-linking-additional-flexible-element-props') ? newContent : oldContent);
 };
-var _default = exports.default = Text;
+var _default = exports.default = BaseTextElement;

package/dist/cjs/view/FlexibleCard/components/elements/common/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseAvatarGroupElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseAvatarGroupElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseBadgeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseBadgeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseDateTimeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseDateTimeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseLinkElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseLinkElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseLozengeElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseLozengeElement.default;
+  }
+});
+Object.defineProperty(exports, "BaseTextElement", {
+  enumerable: true,
+  get: function get() {
+    return _baseTextElement.default;
+  }
+});
+var _baseBadgeElement = _interopRequireDefault(require("./base-badge-element"));
+var _baseTextElement = _interopRequireDefault(require("./base-text-element"));
+var _baseAvatarGroupElement = _interopRequireDefault(require("./base-avatar-group-element"));
+var _baseDateTimeElement = _interopRequireDefault(require("./base-date-time-element"));
+var _baseLozengeElement = _interopRequireDefault(require("./base-lozenge-element"));
+var _baseLinkElement = _interopRequireDefault(require("./base-link-element"));

package/dist/cjs/view/FlexibleCard/components/elements/{icon → icon-element}/index.js

@@ -79,10 +79,10 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
 /**
  * A base element that displays an Icon or favicon.
  * @internal
- * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @param props - The props necessary for the Icon element.
  * @see LinkIcon
  */
-var Icon = function Icon(_ref) {
+var IconElement = function IconElement(_ref) {
   var icon = _ref.icon,
     overrideIcon = _ref.overrideIcon,
     _ref$label = _ref.label,
@@ -119,4 +119,4 @@ var Icon = function Icon(_ref) {
     }
   }, element));
 };
-var _default = exports.default = Icon;
+var _default = exports.default = IconElement;

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

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "AppliedToComponentsCount", {
   enumerable: true,
   get: function get() {
-    return _appliedToComponentsCount.default;
+    return _appliedToComponentsCountElement.default;
   }
 });
 exports.OwnedByGroup = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = exports.AssignedToGroup = exports.AssignedTo = void 0;
 Object.defineProperty(exports, "Preview", {
   enumerable: true,
   get: function get() {
-    return _preview.default;
+    return _previewElement.default;
   }
 });
 exports.SentOn = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = void 0;
@@ -27,9 +27,9 @@ Object.defineProperty(exports, "Snippet", {
 exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = void 0;
 var _constants = require("../../../../constants");
 var _utils = require("./utils");
-var _preview = _interopRequireDefault(require("./preview"));
+var _previewElement = _interopRequireDefault(require("./preview-element"));
 var _snippetElement = _interopRequireDefault(require("./snippet-element"));
-var _appliedToComponentsCount = _interopRequireDefault(require("./applied-to-components-count"));
+var _appliedToComponentsCountElement = _interopRequireDefault(require("./applied-to-components-count-element"));
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems

package/dist/cjs/view/FlexibleCard/components/elements/{media → media-element}/index.js

@@ -24,14 +24,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * contents within the element's box.
  */
 var styles = null;
-
 /**
  * A base element that displays a Media.
  * @internal
- * @param {MediaProps} MediaProps - The props necessary for the Media element.
- * @see Preview
+ * @param props - The props necessary for the Media element.
  */
-var Media = function Media(_ref) {
+var MediaElement = function MediaElement(_ref) {
   var name = _ref.name,
     className = _ref.className,
     _ref$testId = _ref.testId,
@@ -58,4 +56,4 @@ var Media = function Media(_ref) {
     defaultIcon: null
   }));
 };
-var _default = exports.default = Media;
+var _default = exports.default = MediaElement;