@atlaskit/smart-card 38.2.0 → 38.4.0

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

@@ -5,18 +5,17 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
 const stylesOld = null;
 const 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
  */
-const Lozenge = ({
+const BaseLozengeElement = ({
   action,
   appearance = 'default',
   name,
@@ -55,4 +54,4 @@ const Lozenge = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41kw7", fg('platform-linking-visual-refresh-v1') && "_1e0c116y _1ul91ns9", className])
   }), lozenge);
 };
-export default Lozenge;
+export default BaseLozengeElement;

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

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
-import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
-import useInvoke from '../../../../../../state/hooks/use-invoke';
-import { isInvokeCustomError } from '../../../../../../state/hooks/use-invoke/utils';
-import useResolve from '../../../../../../state/hooks/use-resolve';
-import createStatusUpdateRequest from '../../../../../../utils/actions/create-status-update-request';
-import { TrackQuickActionType } from '../../../../../../utils/analytics/analytics';
+import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
+import extractLozengeActionItems from '../../../../../../../extractors/action/extract-lozenge-action-items';
+import useInvoke from '../../../../../../../state/hooks/use-invoke';
+import { isInvokeCustomError } from '../../../../../../../state/hooks/use-invoke/utils';
+import useResolve from '../../../../../../../state/hooks/use-resolve';
+import createStatusUpdateRequest from '../../../../../../../utils/actions/create-status-update-request';
+import { TrackQuickActionType } from '../../../../../../../utils/analytics/analytics';
 import withErrorBoundary from './error-boundary';
 import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
 import LozengeActionError from './lozenge-action-error';

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

@@ -8,10 +8,10 @@ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N800, R50, R500 } from '@atlaskit/theme/colors';
-import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
-import { messages } from '../../../../../../../messages';
-import useInvokeClientAction from '../../../../../../../state/hooks/use-invoke-client-action';
-import { getFormattedMessage } from '../../../../utils';
+import { useAnalyticsEvents } from '../../../../../../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../../../../../../messages';
+import useInvokeClientAction from '../../../../../../../../state/hooks/use-invoke-client-action';
+import { getFormattedMessage } from '../../../../../utils';
 const MAX_LINE_NUMBER = 8;
 const contentStyles = null;
 const linkStyles = null;

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

@@ -1,4 +1,4 @@
-import { messages } from '../../../../../../../messages';
+import { messages } from '../../../../../../../../messages';
 export const LozengeActionErrorMessages = {
   noData: {
     descriptor: messages['status_change_permission_error']

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

@@ -3,18 +3,17 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getFormattedMessage } from '../../utils';
+import { getFormattedMessage } from '../../../utils';
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 const baseStyleOld = null;
 const baseStyle = null;
-
 /**
  * A base element that displays some Text.
  * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-const Text = ({
+export const BaseTextElement = ({
   content,
   maxLines = 1,
   message,
@@ -44,4 +43,4 @@ const Text = ({
     }
   }, fg('platform-linking-additional-flexible-element-props') ? newContent : oldContent);
 };
-export default Text;
+export default BaseTextElement;

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

@@ -0,0 +1,6 @@
+export { default as BaseBadgeElement } from './base-badge-element';
+export { default as BaseTextElement } from './base-text-element';
+export { default as BaseAvatarGroupElement } from './base-avatar-group-element';
+export { default as BaseDateTimeElement } from './base-date-time-element';
+export { default as BaseLozengeElement } from './base-lozenge-element';
+export { default as BaseLinkElement } from './base-link-element';

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

@@ -64,10 +64,10 @@ const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium,
 /**
  * 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
  */
-const Icon = ({
+const IconElement = ({
   icon,
   overrideIcon,
   label = 'Link',
@@ -102,4 +102,4 @@ const Icon = ({
     }
   }, element));
 };
-export default Icon;
+export default IconElement;

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

@@ -1,6 +1,5 @@
 import { ElementName } from '../../../../constants';
 import { createElement } from './utils';
-
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
@@ -93,7 +92,7 @@ export const OwnedByGroup = createElement(ElementName.OwnedByGroup);
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
  */
-export { default as Preview } from './preview';
+export { default as Preview } from './preview-element';
 /**
  * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
  * @see Badge
@@ -174,4 +173,4 @@ export const ViewCount = createElement(ElementName.ViewCount);
  * @see Badge
  */
 export const VoteCount = createElement(ElementName.VoteCount);
-export { default as AppliedToComponentsCount } from './applied-to-components-count';
+export { default as AppliedToComponentsCount } from './applied-to-components-count-element';

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

@@ -14,14 +14,12 @@ import ImageIcon from '../../common/image-icon';
  * contents within the element's box.
  */
 const 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.
  */
-const Media = ({
+const MediaElement = ({
   name,
   className,
   testId = 'smart-element-media',
@@ -48,4 +46,4 @@ const Media = ({
     defaultIcon: null
   }));
 };
-export default Media;
+export default MediaElement;

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

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import { MediaType } from '../../../../../constants';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import Media from '../media';
-const Preview = props => {
+import MediaElement from '../media-element';
+const PreviewElement = props => {
   const {
     overrideUrl,
     ...rest
@@ -16,6 +16,6 @@ const Preview = props => {
   if (!data) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Media, _extends({}, rest, data));
+  return /*#__PURE__*/React.createElement(MediaElement, _extends({}, rest, data));
 };
-export default Preview;
+export default PreviewElement;

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

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import Text from '../text';
+import { BaseTextElement } from '../common';
 const SNIPPET_DEFAULT_MAX_LINES = 3;
 
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
@@ -20,7 +20,7 @@ const SnippetElement = props => {
     ...restOfProps
   } = props !== null && props !== void 0 ? props : {};
   const context = useContext(FlexibleUiContext);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/React.createElement(BaseTextElement, _extends({
     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/es2019/view/FlexibleCard/components/elements/utils.js

@@ -6,16 +6,11 @@ import { ElementName, IconType, SmartLinkInternalTheme } from '../../../../const
 import { messages } from '../../../../messages';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isProfileType } from '../../../../utils';
-import AppliedToComponentsCount from './applied-to-components-count';
-import AtlaskitBadge from './atlaskit-badge';
-import AvatarGroup from './avatar-group';
-import Badge from './badge';
-import DateTime from './date-time';
-import Icon from './icon';
-import Link from './link';
-import Lozenge from './lozenge';
-import Media from './media';
-import Text from './text';
+import AppliedToComponentsCount from './applied-to-components-count-element';
+import AtlaskitElementBadge from './atlaskit-badge-element';
+import { BaseAvatarGroupElement, BaseBadgeElement, BaseDateTimeElement, BaseLinkElement, BaseLozengeElement, BaseTextElement } from './common';
+import IconElement from './icon-element';
+import MediaElement from './media-element';
 const elementMappings = {
   [ElementName.AppliedToComponentsCount]: {
     component: AppliedToComponentsCount,
@@ -24,143 +19,151 @@ const elementMappings = {
     }
   },
   [ElementName.AttachmentCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.Attachment
     }
   },
   [ElementName.AuthorGroup]: {
-    component: AvatarGroup
+    component: BaseAvatarGroupElement
   },
   [ElementName.ChecklistProgress]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.CheckItem
     }
   },
   [ElementName.CollaboratorGroup]: {
-    component: AvatarGroup
+    component: BaseAvatarGroupElement
   },
   [ElementName.CommentCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.Comment
     }
   },
   [ElementName.ViewCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.View
     }
   },
   [ElementName.ReactCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.React
     }
   },
   [ElementName.VoteCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.Vote
     }
   },
   [ElementName.CreatedBy]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.OwnedBy]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.AssignedTo]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.AssignedToGroup]: {
-    component: AvatarGroup
+    component: BaseAvatarGroupElement
   },
   [ElementName.OwnedByGroup]: {
-    component: AvatarGroup
+    component: BaseAvatarGroupElement
   },
   [ElementName.CreatedOn]: {
-    component: DateTime
+    component: BaseDateTimeElement
   },
   [ElementName.DueOn]: {
-    component: Lozenge
+    component: BaseLozengeElement
   },
   [ElementName.LatestCommit]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.Commit
     }
   },
   [ElementName.LinkIcon]: {
-    component: Icon
+    component: IconElement
   },
   [ElementName.ModifiedBy]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.ModifiedOn]: {
-    component: DateTime
+    component: BaseDateTimeElement
   },
   [ElementName.Preview]: {
-    component: Media
+    component: MediaElement
   },
   [ElementName.Priority]: {
-    component: Badge
+    component: BaseBadgeElement
   },
   [ElementName.ProgrammingLanguage]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.ProgrammingLanguage
     }
   },
   [ElementName.Provider]: {
-    component: Badge
+    component: BaseBadgeElement
   },
   [ElementName.ReadTime]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.SentOn]: {
-    component: DateTime
+    component: BaseDateTimeElement
   },
   [ElementName.SourceBranch]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.State]: {
-    component: Lozenge
+    component: BaseLozengeElement
   },
   [ElementName.SubscriberCount]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.Subscriber
     }
   },
   [ElementName.SubTasksProgress]: {
-    component: Badge,
+    component: BaseBadgeElement,
     props: {
       icon: IconType.SubTasksProgress
     }
   },
   [ElementName.StoryPoints]: {
-    component: AtlaskitBadge
+    component: AtlaskitElementBadge
   },
   [ElementName.TargetBranch]: {
-    component: Text
+    component: BaseTextElement
   },
   [ElementName.Title]: {
-    component: Link
+    component: BaseLinkElement
   },
   [ElementName.Location]: {
-    component: Link,
+    component: BaseLinkElement,
     props: {
       theme: SmartLinkInternalTheme.Grey
     }
   }
 };
+
+/**
+ * @deprecated
+ */
 const 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
+ */
 const getData = (elementName, contextKey, context) => {
   if (!context) {
     return undefined;
@@ -302,6 +305,10 @@ const toLinkIconProps = (data, type) => {
     appearance: isImageRound ? 'round' : 'square'
   };
 };
+
+/**
+ * @deprecated
+ */
 export const createElement = name => {
   const {
     component: BaseElement,

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
 import { LoadingSkeleton } from '../../../../FlexibleCard/components/common/loading-skeleton';
-import Icon from '../../../../FlexibleCard/components/elements/icon';
+import IconElement from '../../../../FlexibleCard/components/elements/icon-element';
 import { CARD_WIDTH_REM } from '../../../styled';
 const loadingViewContainer = null;
 const skeletonContainer = null;
@@ -34,7 +34,7 @@ const HoverCardLoadingView = ({
   }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
     testId: `${testId}-title-block`,
     className: ax(["_zulpcxkx _1bsb1osq"])
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(IconElement, {
     render: () => /*#__PURE__*/React.createElement(LoadingSkeleton, null),
     size: size
   }), /*#__PURE__*/React.createElement("span", {

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

@@ -33,7 +33,10 @@ const 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/es2019/view/LinkUrl/index.js

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

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

@@ -31,7 +31,10 @@ const UnauthorisedViewContent = ({
     target: "_blank",
     testId: `${testId}-learn-more`,
     onClick: handleLearnMoreClick
-  }, /*#__PURE__*/React.createElement(FormattedMessage, learnMoreMessage)) : /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, learnMoreMessage)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-html-anchor
+  React.createElement("a", {
     href: isProductIntegrationSupported ? CONTENT_URL_3P_ACCOUNT_AUTH : CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": `${testId}-learn-more`,

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

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

@@ -4,7 +4,7 @@ var _excluded = ["testId"];
 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/esm/view/BlockCard/views/ForbiddenView.js

@@ -18,7 +18,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/esm/view/BlockCard/views/NotFoundView.js

@@ -12,7 +12,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';
 var textStyles = null;

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

@@ -66,7 +66,10 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
         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/esm/view/EmbedModal/index.js

@@ -7,7 +7,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';
@@ -104,7 +104,7 @@ var EmbedModal = function EmbedModal(_ref) {
     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/esm/view/FlexibleCard/components/common/ai-summary/ai-learn-more-anchor.js

@@ -12,7 +12,10 @@ var AILearnMoreAnchor = function AILearnMoreAnchor(_ref) {
     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/esm/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';
-var AppliedToComponentsCount = function AppliedToComponentsCount(props) {
+import { BaseBadgeElement } from '../common';
+var AppliedToComponentsCountElement = function AppliedToComponentsCountElement(props) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var context = useContext(FlexibleUiContext);
@@ -17,9 +17,9 @@ var AppliedToComponentsCount = function AppliedToComponentsCount(props) {
   var 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/esm/view/FlexibleCard/components/elements/{atlaskit-badge → atlaskit-badge-element}/index.js

@@ -15,7 +15,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,
@@ -33,4 +33,4 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
     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;