@atlaskit/smart-card 38.2.0 → 38.4.0

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;

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

@@ -11,11 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _media = _interopRequireDefault(require("../media"));
+var _mediaElement = _interopRequireDefault(require("../media-element"));
 var _excluded = ["overrideUrl"];
 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 Preview = function Preview(props) {
+var PreviewElement = function PreviewElement(props) {
   var _ref = props !== null && props !== void 0 ? props : {},
     overrideUrl = _ref.overrideUrl,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -27,6 +27,6 @@ var Preview = function Preview(props) {
   if (!data) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_media.default, (0, _extends2.default)({}, rest, data));
+  return /*#__PURE__*/_react.default.createElement(_mediaElement.default, (0, _extends2.default)({}, rest, data));
 };
-var _default = exports.default = Preview;
+var _default = exports.default = PreviewElement;

package/dist/cjs/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _text = _interopRequireDefault(require("../text"));
+var _common = require("../common");
 var _excluded = ["content", "maxLines", "className"];
 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; }
@@ -32,7 +32,7 @@ var SnippetElement = function SnippetElement(props) {
     className = _ref.className,
     restOfProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
-  return /*#__PURE__*/React.createElement(_text.default, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_common.BaseTextElement, (0, _extends2.default)({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -16,131 +16,134 @@ var _constants = require("../../../../constants");
 var _messages = require("../../../../messages");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _utils = require("../../../../utils");
-var _appliedToComponentsCount = _interopRequireDefault(require("./applied-to-components-count"));
-var _atlaskitBadge = _interopRequireDefault(require("./atlaskit-badge"));
-var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
-var _badge = _interopRequireDefault(require("./badge"));
-var _dateTime = _interopRequireDefault(require("./date-time"));
-var _icon = _interopRequireDefault(require("./icon"));
-var _link = _interopRequireDefault(require("./link"));
-var _lozenge = _interopRequireDefault(require("./lozenge"));
-var _media = _interopRequireDefault(require("./media"));
-var _text = _interopRequireDefault(require("./text"));
+var _appliedToComponentsCountElement = _interopRequireDefault(require("./applied-to-components-count-element"));
+var _atlaskitBadgeElement = _interopRequireDefault(require("./atlaskit-badge-element"));
+var _common = require("./common");
+var _iconElement = _interopRequireDefault(require("./icon-element"));
+var _mediaElement = _interopRequireDefault(require("./media-element"));
 var _elementMappings;
 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" != _typeof3(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 elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.AppliedToComponentsCount, {
-  component: _appliedToComponentsCount.default,
+  component: _appliedToComponentsCountElement.default,
   props: {
     icon: _constants.IconType.Component
   }
 }), _constants.ElementName.AttachmentCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Attachment
   }
 }), _constants.ElementName.AuthorGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.ChecklistProgress, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.CheckItem
   }
 }), _constants.ElementName.CollaboratorGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.CommentCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Comment
   }
 }), _constants.ElementName.ViewCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.View
   }
 }), _constants.ElementName.ReactCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.React
   }
 }), _constants.ElementName.VoteCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Vote
   }
 }), _constants.ElementName.CreatedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.OwnedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.AssignedTo, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.AssignedToGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.OwnedByGroup, {
-  component: _avatarGroup.default
+  component: _common.BaseAvatarGroupElement
 }), _constants.ElementName.CreatedOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), _constants.ElementName.DueOn, {
-  component: _lozenge.default
+  component: _common.BaseLozengeElement
 }), _constants.ElementName.LatestCommit, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Commit
   }
 }), _constants.ElementName.LinkIcon, {
-  component: _icon.default
+  component: _iconElement.default
 }), _constants.ElementName.ModifiedBy, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.ModifiedOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Preview, {
-  component: _media.default
+  component: _mediaElement.default
 }), _constants.ElementName.Priority, {
-  component: _badge.default
+  component: _common.BaseBadgeElement
 }), _constants.ElementName.ProgrammingLanguage, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.ProgrammingLanguage
   }
 }), _constants.ElementName.Provider, {
-  component: _badge.default
+  component: _common.BaseBadgeElement
 }), _constants.ElementName.ReadTime, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.SentOn, {
-  component: _dateTime.default
+  component: _common.BaseDateTimeElement
 }), _constants.ElementName.SourceBranch, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.State, {
-  component: _lozenge.default
+  component: _common.BaseLozengeElement
 }), _constants.ElementName.SubscriberCount, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.Subscriber
   }
 }), _constants.ElementName.SubTasksProgress, {
-  component: _badge.default,
+  component: _common.BaseBadgeElement,
   props: {
     icon: _constants.IconType.SubTasksProgress
   }
 }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_elementMappings, _constants.ElementName.StoryPoints, {
-  component: _atlaskitBadge.default
+  component: _atlaskitBadgeElement.default
 }), _constants.ElementName.TargetBranch, {
-  component: _text.default
+  component: _common.BaseTextElement
 }), _constants.ElementName.Title, {
-  component: _link.default
+  component: _common.BaseLinkElement
 }), _constants.ElementName.Location, {
-  component: _link.default,
+  component: _common.BaseLinkElement,
   props: {
     theme: _constants.SmartLinkInternalTheme.Grey
   }
 }));
+
+/**
+ * @deprecated
+ */
 var getContextKey = function getContextKey(name) {
   // Attempt to predict context prop name in advance to reduce the amount of
   // code run during runtime
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
+
+/**
+ * @deprecated
+ */
 var getData = function getData(elementName, contextKey, context) {
   if (!context) {
     return undefined;
@@ -281,6 +284,10 @@ var toLinkIconProps = function toLinkIconProps(data, type) {
     appearance: isImageRound ? 'round' : 'square'
   });
 };
+
+/**
+ * @deprecated
+ */
 var createElement = exports.createElement = function createElement(name) {
   var _ref = elementMappings[name] || {},
     BaseElement = _ref.component,

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

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _actionGroup = _interopRequireDefault(require("../../../../FlexibleCard/components/blocks/action-group"));
 var _loadingSkeleton = require("../../../../FlexibleCard/components/common/loading-skeleton");
-var _icon = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon"));
+var _iconElement = _interopRequireDefault(require("../../../../FlexibleCard/components/elements/icon-element"));
 var _styled = require("../../../styled");
 var loadingViewContainer = null;
 var skeletonContainer = null;
@@ -38,7 +38,7 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, (0, _extends2.default)({}, titleBlockProps, {
     testId: "".concat(testId, "-title-block"),
     className: (0, _runtime.ax)(["_zulpcxkx _1bsb1osq"])
-  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_iconElement.default, {
     render: function render() {
       return /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeleton, null);
     },

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

@@ -42,7 +42,10 @@ var WarningModal = function WarningModal(props) {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"
-        }, url) : /*#__PURE__*/React.createElement("a", {
+        }, url) :
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+        React.createElement("a", {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"

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

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

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -40,7 +40,10 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     target: "_blank",
     testId: "".concat(testId, "-learn-more"),
     onClick: handleLearnMoreClick
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, learnMoreMessage)) : /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, learnMoreMessage)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+  _react.default.createElement("a", {
     href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more"),

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { messages } from '../../../messages';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import { RetryAction } from '../actions/RetryAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';

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

@@ -15,7 +15,7 @@ import extractHostname from '../../../extractors/common/hostname/extractHostname
 import { messages } from '../../../messages';
 import { toMessage } from '../../../utils/intl-utils';
 import { getForbiddenJsonLd } from '../../../utils/jsonld';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import { ForbiddenAction } from '../actions/ForbiddenAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';

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

@@ -10,7 +10,7 @@ import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider, extractSmartLinkProvider } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../messages';
-import Text from '../../FlexibleCard/components/elements/text';
+import Text from '../../FlexibleCard/components/elements/common/base-text-element';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 const textStyles = null;

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -58,7 +58,10 @@ export const ExpandedFrame = ({
         hideTooltipOnMouseDown: true
       }, /*#__PURE__*/React.createElement(TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+      }, !isPlaceholder &&
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+      React.createElement("a", {
         href: href,
         onClick: handleClick,
         onMouseDown: handleMouseDown

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

@@ -6,7 +6,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
 import { SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { getPreviewUrlWithTheme } from '../../utils';
-import Icon from '../FlexibleCard/components/elements/icon';
+import IconElement from '../FlexibleCard/components/elements/icon-element';
 import withAnalytics from './components/analytics';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
@@ -89,7 +89,7 @@ const EmbedModal = ({
     label: title
   } : {}), /*#__PURE__*/React.createElement(LinkInfo, {
     icon: linkIcon && {
-      icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      icon: /*#__PURE__*/React.createElement(IconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true

package/dist/es2019/view/FlexibleCard/components/common/ai-summary/ai-learn-more-anchor.js

@@ -10,7 +10,10 @@ const AILearnMoreAnchor = ({
   href: CONTENT_URL_AI,
   target: "_blank",
   rel: "noopener noreferrer"
-}, props), children) : /*#__PURE__*/React.createElement("a", _extends({
+}, props), children) :
+/*#__PURE__*/
+// eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+React.createElement("a", _extends({
   href: CONTENT_URL_AI,
   target: "_blank",
   rel: "noopener noreferrer"

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

@@ -4,8 +4,8 @@ import { useIntl } from 'react-intl-next';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import Badge from '../badge';
-const AppliedToComponentsCount = props => {
+import { BaseBadgeElement } from '../common';
+const AppliedToComponentsCountElement = props => {
   const {
     formatMessage
   } = useIntl();
@@ -18,9 +18,9 @@ const AppliedToComponentsCount = props => {
   const label = formatMessage(messages.compass_applied_components_count, {
     numberOfComponents: context.appliedToComponentsCount
   });
-  return /*#__PURE__*/React.createElement(Badge, _extends({
+  return /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
     icon: IconType.Component,
     label: label
   }, props));
 };
-export default AppliedToComponentsCount;
+export default AppliedToComponentsCountElement;

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

@@ -14,7 +14,7 @@ const badgeStyles = null;
  * @see StoryPoints
  * */
 
-const AtlaskitBadge = ({
+const AtlaskitElementBadge = ({
   value,
   name,
   className,
@@ -34,4 +34,4 @@ const AtlaskitBadge = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
   }), /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
-export default AtlaskitBadge;
+export default AtlaskitElementBadge;

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

@@ -7,10 +7,9 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { ElementName, SmartLinkSize } from '../../../../../constants';
-import { messages } from '../../../../../messages';
-import { getFormattedMessageAsString } from '../../utils';
-const MAX_COUNT = 4;
+import { ElementName, SmartLinkSize } from '../../../../../../constants';
+import { messages } from '../../../../../../messages';
+import { getFormattedMessageAsString } from '../../../utils';
 const styles = null;
 const stylesMap = {
   xlarge: "_1e0c116y _1kvxu2gc _102oidpf",
@@ -30,17 +29,16 @@ const getPersonNameWithPrefix = (elementName, personName, intl) => {
       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
  */
-const AvatarGroup = ({
+const BaseAvatarGroup = ({
   items = [],
-  maxCount = MAX_COUNT,
+  maxCount = 4,
   name,
   className,
   size = SmartLinkSize.Medium,
@@ -92,4 +90,4 @@ const AvatarGroup = ({
     testId: testId
   }));
 };
-export default AvatarGroup;
+export default BaseAvatarGroup;

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

@@ -5,14 +5,15 @@ import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import React, { forwardRef } from 'react';
+import { withFeatureFlaggedComponent } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import { IconType } from '../../../../../constants';
-import { messages } from '../../../../../messages';
-import AtlaskitIcon from '../../common/atlaskit-icon';
-import ImageIcon from '../../common/image-icon';
-import { withOverrideCss } from '../../common/with-override-css';
-import { getFormattedMessage } from '../../utils';
+import { IconType } from '../../../../../../constants';
+import { messages } from '../../../../../../messages';
+import AtlaskitIcon from '../../../common/atlaskit-icon';
+import ImageIcon from '../../../common/image-icon';
+import { withOverrideCss } from '../../../common/with-override-css';
+import { getFormattedMessage } from '../../../utils';
 const styles = {
   container: "_zulp1b66 _1e0c116y _4cvr1h6o _1ul91ns9",
   icon: "_1e0c116y _v4pn116y _1b94116y _1ii7116y _4t3i7vkz _bna77vkz _1xjx7vkz _17527vkz _ca0qze3t _14bqze3t _1oh2ze3t _i2i3ze3t _u5f3ze3t _3tceze3t _99ztze3t _uhasze3t _n3tdze3t _1ym6ze3t _1m2uze3t _5jw9ze3t _19bvze3t _1xr1ze3t _9n9oze3t _7wy9ze3t _1bsb7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _s7n4nkob _rtqbnkob _e4kmnkob _z239nkob",
@@ -67,11 +68,10 @@ const 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
@@ -81,7 +81,7 @@ const renderImageIcon = (url, testId) => {
  * @see ProgrammingLanguage
  * @see Provider
  */
-const BadgeRefreshNew = /*#__PURE__*/forwardRef(({
+const BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(({
   appearance = 'default',
   hideIcon = false,
   icon,
@@ -116,8 +116,8 @@ const BadgeRefreshNew = /*#__PURE__*/forwardRef(({
 });
 
 // On cleanup of platform-linking-visual-refresh-v1, this should become
-// export default withOverrideCss(Badge);
-const BadgeRefreshNewWithOverrideCss = withOverrideCss(BadgeRefreshNew);
+// export default withOverrideCss(BaseBadgeElement);
+const BaseBadgeElementRefreshNewWithOverrideCss = withOverrideCss(BaseBadgeRefreshNew);
 
 /**
  * A base element that displays some text with an associated icon.
@@ -132,7 +132,7 @@ const BadgeRefreshNewWithOverrideCss = withOverrideCss(BadgeRefreshNew);
  * @see ProgrammingLanguage
  * @see Provider
  */
-const BadgeCompiledNew = ({
+const BaseBadgeElementCompiledNew = ({
   hideIcon = false,
   icon,
   label,
@@ -162,11 +162,4 @@ const BadgeCompiledNew = ({
     className: ax(["_11c8dcr7 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
-const Badge = props => {
-  if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(BadgeRefreshNewWithOverrideCss, props);
-  } else {
-    return /*#__PURE__*/React.createElement(BadgeCompiledNew, props);
-  }
-};
-export default Badge;
+export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));

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

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { selectUnit } from '@formatjs/intl-utils';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { messages } from '../../../../../messages';
+import { messages } from '../../../../../../messages';
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 const stylesOld = null;
 const styles = null;
@@ -24,16 +24,15 @@ const typeToDescriptorMap = {
     absolute: 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
  */
-const DateTime = ({
+const BaseDateTimeElement = ({
   date,
   name,
   className,
@@ -95,4 +94,4 @@ const DateTime = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8dcr7 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", fg('platform-linking-visual-refresh-v1') && "_11c81o8v _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k7vkz", className])
   }, content);
 };
-export default DateTime;
+export default BaseDateTimeElement;

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

@@ -7,9 +7,9 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import React, { useMemo } from 'react';
 import Tooltip from '@atlaskit/tooltip';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-import { hasWhiteSpace } from '../../utils';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../../../constants';
+import { useMouseDownEvent } from '../../../../../../state/analytics/useLinkClicked';
+import { hasWhiteSpace } from '../../../utils';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
@@ -61,14 +61,13 @@ const 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
  */
-const Link = ({
+const BaseLinkElement = ({
   hideTooltip,
   maxLines = DEFAULT_MAX_LINES,
   name,
@@ -102,4 +101,4 @@ const Link = ({
     className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-export default Link;
+export default BaseLinkElement;