@atlaskit/smart-card 38.4.5 → 38.5.1

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 IconElement from '../FlexibleCard/components/elements/icon-element';
+import { BaseIconElement } from '../FlexibleCard/components/elements/common';
 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(IconElement, _extends({}, linkIcon, {
+      icon: /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true

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

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useSmartLinkRenderers } from '../../../../../state/renderers';
 import { Snippet } from '../../elements';
 import { getMaxLines } from '../../utils';
 import Block from '../block';
@@ -21,16 +24,37 @@ const SnippetBlock = ({
   text,
   ...blockProps
 }) => {
+  var _ref, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  const context = fg('cc-ai-linking-platform-snippet-renderer') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiContext() : undefined;
+  const renderers = fg('cc-ai-linking-platform-snippet-renderer') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useSmartLinkRenderers() : undefined;
   if (status !== SmartLinkStatus.Resolved && !text) {
     return null;
   }
   const snippetMaxLines = getMaxLines(maxLines, DEFAULT_MAX_LINES, MAXIMUM_MAX_LINES, MINIMUM_MAX_LINES);
   const statusTestId = !text ? 'resolved' : 'non-resolved';
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-${statusTestId}-view`
-  }), /*#__PURE__*/React.createElement(Snippet, {
+  const snippet = /*#__PURE__*/React.createElement(Snippet, {
     maxLines: snippetMaxLines,
     content: text
-  }));
+  });
+  if (!fg('cc-ai-linking-platform-snippet-renderer')) {
+    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+      testId: `${testId}-${statusTestId}-view`
+    }), snippet);
+  }
+  const SnippetReplacement = renderers === null || renderers === void 0 ? void 0 : renderers.snippet;
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-${statusTestId}-view`
+  }), SnippetReplacement ? /*#__PURE__*/React.createElement(SnippetReplacement, {
+    fallbackText: (_ref = text || (context === null || context === void 0 ? void 0 : context.snippet)) !== null && _ref !== void 0 ? _ref : '',
+    fallbackComponent: snippet,
+    contentId: (_context$meta$objectI = context === null || context === void 0 ? void 0 : (_context$meta = context.meta) === null || _context$meta === void 0 ? void 0 : _context$meta.objectId) !== null && _context$meta$objectI !== void 0 ? _context$meta$objectI : '',
+    contentType: (_context$meta$resourc = context === null || context === void 0 ? void 0 : (_context$meta2 = context.meta) === null || _context$meta2 === void 0 ? void 0 : _context$meta2.resourceType) !== null && _context$meta$resourc !== void 0 ? _context$meta$resourc : '',
+    cloudId: (_context$meta$tenantI = context === null || context === void 0 ? void 0 : (_context$meta3 = context.meta) === null || _context$meta3 === void 0 ? void 0 : _context$meta3.tenantId) !== null && _context$meta$tenantI !== void 0 ? _context$meta$tenantI : '',
+    maxLines: snippetMaxLines
+  }) : snippet);
 };
 export default SnippetBlock;

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

@@ -1,20 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { BaseBadgeElement } from '../common';
 const AppliedToComponentsCountElement = props => {
   const {
     formatMessage
   } = useIntl();
-  const context = fg('platform-linking-flexible-card-context') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFlexibleUiContext() :
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useContext(FlexibleUiContext);
+  const context = useFlexibleUiContext();
   if (
   // Check for null and undefined, render if it's 0.
   (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+const AssignedToElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toFormattedTextProps(messages.assigned_to, context.assignedTo) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.AssignedTo
+  })) : null;
+};
+export default AssignedToElement;

package/dist/es2019/view/FlexibleCard/components/elements/assigned-to-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const AssignedToGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.assignedToGroup, true) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AssignedToGroup
+  })) : null;
+};
+export default AssignedToGroupElement;

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const AttachmentCountElement = props => {
+  var _context$attachmentCo;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$attachmentCo = context.attachmentCount) === null || _context$attachmentCo === void 0 ? void 0 : _context$attachmentCo.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Attachment
+  }, data, props, {
+    name: ElementName.AttachmentCount
+  })) : null;
+};
+export default AttachmentCountElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const AuthorGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.authorGroup, false) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.AuthorGroup
+  })) : null;
+};
+export default AuthorGroupElement;

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const ChecklistProgressElement = props => {
+  var _context$checklistPro;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$checklistPro = context.checklistProgress) === null || _context$checklistPro === void 0 ? void 0 : _context$checklistPro.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.CheckItem
+  }, data, props, {
+    name: ElementName.ChecklistProgress
+  })) : null;
+};
+export default ChecklistProgressElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const CollaboratorGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.collaboratorGroup, false) : undefined;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.CollaboratorGroup
+  })) : null;
+};
+export default CollaboratorGroupElement;

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const CommentCountElement = props => {
+  var _context$commentCount;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$commentCount = context.commentCount) === null || _context$commentCount === void 0 ? void 0 : _context$commentCount.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Comment
+  }, data, props, {
+    name: ElementName.CommentCount
+  })) : null;
+};
+export default CommentCountElement;

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

@@ -14,7 +14,7 @@ const badgeStyles = null;
  * @see StoryPoints
  * */
 
-const AtlaskitElementBadge = ({
+const BaseAtlaskitElementBadge = ({
   value,
   name,
   className,
@@ -34,4 +34,9 @@ const AtlaskitElementBadge = ({
     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 AtlaskitElementBadge;
+export default BaseAtlaskitElementBadge;
+export const toAtlaskitBadgeProps = value => {
+  return value ? {
+    value
+  } : undefined;
+};

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

@@ -90,4 +90,11 @@ const BaseAvatarGroup = ({
     testId: testId
   }));
 };
-export default BaseAvatarGroup;
+export default BaseAvatarGroup;
+export const toAvatarGroupProps = (items, showFallbackAvatar) => {
+  return items ? {
+    items
+  } : showFallbackAvatar ? {
+    items: []
+  } : undefined;
+};

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

@@ -162,4 +162,15 @@ const BaseBadgeElementCompiledNew = ({
     className: ax(["_11c8dcr7 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
-export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));
+export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));
+export const toBadgeProps = label => {
+  if (fg('platform-linking-flexible-card-elements-refactor')) {
+    // Don't render the element if its 0
+    return label !== '0' && label ? {
+      label
+    } : undefined;
+  }
+  return label ? {
+    label
+  } : undefined;
+};

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

@@ -27,7 +27,7 @@ const typeToDescriptorMap = {
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
- * @param {BaseDateTimeProps} BaseDateTimeProps - The props necessary for the DateTime element.
+ * @param {BaseDateTimeElementProps} BaseDateTimeElementProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
  * @see SentOn
@@ -94,4 +94,10 @@ const BaseDateTimeElement = ({
     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 BaseDateTimeElement;
+export default BaseDateTimeElement;
+export const toDateTimeProps = (type, dateString) => {
+  return dateString ? {
+    date: new Date(dateString),
+    type
+  } : undefined;
+};

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

@@ -11,10 +11,11 @@ import { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import AtlaskitIcon from '../../common/atlaskit-icon';
-import ImageIcon from '../../common/image-icon';
-import { getIconWidth } from '../../utils';
+import { SmartLinkPosition, SmartLinkSize } from '../../../../../../constants';
+import { isProfileType } from '../../../../../../utils';
+import AtlaskitIcon from '../../../common/atlaskit-icon';
+import ImageIcon from '../../../common/image-icon';
+import { getIconWidth } from '../../../utils';
 const styles = {
   container: "_1ul91ns9",
   iconWrapperStyle: "_1e0c1txw _4cvr1h6o _1bah1h6o"
@@ -102,4 +103,17 @@ const IconElement = ({
     }
   }, element));
 };
-export default IconElement;
+export default IconElement;
+export const toLinkIconProps = (data, type) => {
+  const isDataLinkIcon = _data => {
+    return typeof _data === 'object' && _data !== null && ('icon' in _data || 'url' in _data);
+  };
+  if (!isDataLinkIcon(data)) {
+    return typeof data === 'object' ? data : undefined;
+  }
+  const isImageRound = isProfileType(type);
+  return {
+    ...data,
+    appearance: isImageRound ? 'round' : 'square'
+  };
+};

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

@@ -104,4 +104,10 @@ const BaseLinkElement = ({
     className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-export default BaseLinkElement;
+export default BaseLinkElement;
+export const toLinkProps = (text, url) => {
+  return text ? {
+    text,
+    url
+  } : undefined;
+};

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { FormattedDate } from 'react-intl-next';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
@@ -54,4 +55,18 @@ const BaseLozengeElement = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41kw7", fg('platform-linking-visual-refresh-v1') && "_1e0c116y _1ul91ns9", className])
   }), lozenge);
 };
-export default BaseLozengeElement;
+export default BaseLozengeElement;
+export const toDateLozengeProps = dateString => {
+  if (dateString) {
+    const text = Date.parse(dateString) ? /*#__PURE__*/React.createElement(FormattedDate, {
+      value: new Date(dateString),
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      formatMatcher: "best fit"
+    }) : dateString;
+    return {
+      text
+    };
+  }
+};

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

@@ -43,4 +43,30 @@ export const BaseTextElement = ({
     }
   }, fg('platform-linking-additional-flexible-element-props') ? newContent : oldContent);
 };
-export default BaseTextElement;
+export default BaseTextElement;
+export const toFormattedTextProps = (descriptor, context) => {
+  if (fg('platform-linking-additional-flexible-element-props')) {
+    return context ? {
+      message: {
+        descriptor,
+        values: {
+          context
+        }
+      },
+      content: context
+    } : undefined;
+  }
+  return context ? {
+    message: {
+      descriptor,
+      values: {
+        context
+      }
+    }
+  } : undefined;
+};
+export const toTextProps = content => {
+  return content ? {
+    content
+  } : undefined;
+};

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

@@ -1,6 +1,8 @@
-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';
+export { default as BaseBadgeElement, toBadgeProps } from './base-badge-element';
+export { default as BaseTextElement, toFormattedTextProps, toTextProps } from './base-text-element';
+export { default as BaseAvatarGroupElement, toAvatarGroupProps } from './base-avatar-group-element';
+export { default as BaseDateTimeElement, toDateTimeProps } from './base-date-time-element';
+export { default as BaseLozengeElement, toDateLozengeProps } from './base-lozenge-element';
+export { default as BaseLinkElement, toLinkProps } from './base-link-element';
+export { default as BaseIconElement, toLinkIconProps } from './base-icon-element';
+export { default as BaseAtlaskitBadgeElement, toAtlaskitBadgeProps } from './base-atlaskit-badge-element';

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+const CreatedByElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toFormattedTextProps(messages.created_by, context.createdBy) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.CreatedBy
+  })) : null;
+};
+export default CreatedByElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseDateTimeElement, toDateTimeProps } from '../common';
+const CreatedOnElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toDateTimeProps('created', context.createdOn) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseDateTimeElement, _extends({}, data, props, {
+    name: ElementName.CreatedOn
+  })) : null;
+};
+export default CreatedOnElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseLozengeElement, toDateLozengeProps } from '../common';
+const DueOnElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toDateLozengeProps(context.dueOn) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseLozengeElement, _extends({}, data, props, {
+    name: ElementName.DueOn
+  })) : null;
+};
+export default DueOnElement;

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

@@ -1,5 +1,12 @@
 import { ElementName } from '../../../../constants';
 import { createElement } from './utils';
+/**
+ * @note The intention is to replace all the exports below with an import from
+ * the direct files when `createElement` is deleted.
+ * This changes should be made when FG platform-linking-flexible-card-elements-refactor
+ * is cleaned up
+ */
+
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
@@ -8,6 +15,9 @@ import { createElement } from './utils';
  * @see Text
  */
 export const AssignedTo = createElement(ElementName.AssignedTo);
+// For example, this should be replaced with
+// export { default * AssignedTo } from "./assigned-to-element"
+
 /**
  * An AvatarGroup element using the data from AssignedToGroup in the Flexible UI Context.
  * @see AvatarGroup

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, IconType } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement, toBadgeProps } from '../common';
+const LatestCommitElement = props => {
+  var _context$latestCommit;
+  const context = useFlexibleUiContext();
+  const data = context ? toBadgeProps((_context$latestCommit = context.latestCommit) === null || _context$latestCommit === void 0 ? void 0 : _context$latestCommit.toString()) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
+    icon: IconType.Commit
+  }, data, props, {
+    name: ElementName.LatestCommit
+  })) : null;
+};
+export default LatestCommitElement;

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

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseIconElement, toLinkIconProps } from '../common';
+const LinkIconElement = props => {
+  const context = useFlexibleUiContext();
+  if (!context) {
+    return null;
+  }
+  if (fg('platform-linking-visual-refresh-v2')) {
+    const data = toLinkIconProps(context === null || context === void 0 ? void 0 : context.linkIcon, context.type);
+    return data ? /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, data, props, {
+      name: ElementName.LinkIcon
+    })) : null;
+  }
+  const data = typeof (context === null || context === void 0 ? void 0 : context.linkIcon) === 'object' ? context === null || context === void 0 ? void 0 : context.linkIcon : undefined;
+  return data ? /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, data, props, {
+    name: ElementName.LinkIcon
+  })) : null;
+};
+export default LinkIconElement;

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName, SmartLinkInternalTheme } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseLinkElement } from '../common';
+const LocationElement = props => {
+  var _context$location;
+  const context = useFlexibleUiContext();
+  const data = (_context$location = context === null || context === void 0 ? void 0 : context.location) !== null && _context$location !== void 0 ? _context$location : null;
+  return data ? /*#__PURE__*/React.createElement(BaseLinkElement, _extends({
+    theme: SmartLinkInternalTheme.Grey
+  }, data, props, {
+    name: ElementName.Location
+  })) : null;
+};
+export default LocationElement;

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+const ModifiedByElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toFormattedTextProps(messages.modified_by, context.modifiedBy) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.ModifiedBy
+  })) : null;
+};
+export default ModifiedByElement;

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

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseDateTimeElement, toDateTimeProps } from '../common';
+const ModifiedOnElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toDateTimeProps('modified', context.modifiedOn) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseDateTimeElement, _extends({}, data, props, {
+    name: ElementName.ModifiedOn
+  })) : null;
+};
+export default ModifiedOnElement;

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement, toFormattedTextProps } from '../common';
+const OwnedByElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toFormattedTextProps(messages.owned_by, context.ownedBy) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseTextElement, _extends({}, data, props, {
+    name: ElementName.OwnedBy
+  })) : null;
+};
+export default OwnedByElement;

package/dist/es2019/view/FlexibleCard/components/elements/owned-by-group-element/index.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ElementName } from '../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseAvatarGroupElement, toAvatarGroupProps } from '../common';
+const OwnedByGroupElement = props => {
+  const context = useFlexibleUiContext();
+  const data = context ? toAvatarGroupProps(context.ownedByGroup, false) : null;
+  return data ? /*#__PURE__*/React.createElement(BaseAvatarGroupElement, _extends({}, data, props, {
+    name: ElementName.OwnedByGroup
+  })) : null;
+};
+export default OwnedByGroupElement;

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

@@ -1,19 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
+import React from 'react';
 import { MediaType } from '../../../../../constants';
-import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import MediaElement from '../media-element';
 const PreviewElement = props => {
   const {
     overrideUrl,
     ...rest
   } = props !== null && props !== void 0 ? props : {};
-  const context = fg('platform-linking-flexible-card-context') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFlexibleUiContext() :
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useContext(FlexibleUiContext);
+  const context = useFlexibleUiContext();
   const data = overrideUrl ? {
     url: overrideUrl,
     type: MediaType.Image