@atlaskit/smart-card 36.5.0 → 36.6.0

package/dist/es2019/utils/flexible.js

@@ -1,8 +1,15 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
 import { FooterBlock, PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
-export const isFlexibleUiCard = children => {
+export const isFlexibleUiCard = (children, ui) => {
+  if (fg('platform-linking-flexible-card-openness')) {
+    if (ui !== null && ui !== void 0 && ui.removeBlockRestriction) {
+      var _React$Children$toArr;
+      return children && ((_React$Children$toArr = React.Children.toArray(children)) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.length) > 0 ? true : false;
+    }
+  }
   if (children && React.Children.toArray(children).some(child => isFlexibleUiTitleBlock(child))) {
     return true;
   }

package/dist/es2019/view/CardWithUrl/component.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
@@ -60,7 +61,7 @@ function Component({
   const extensionKey = getExtensionKey(state.details);
   const resourceType = getResourceType(state.details);
   const services = getServices(state.details);
-  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
+  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, fg('platform-linking-flexible-card-openness') ? ui : undefined), [children, ui]);
   const actionOptions = combineActionOptions({
     actionOptions: actionOptionsProp,
     platform
@@ -260,7 +261,7 @@ function Component({
   }
 }
 export const CardWithUrlContent = props => {
-  const display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
+  const display = isFlexibleUiCard(props.children, fg('platform-linking-flexible-card-openness') ? props === null || props === void 0 ? void 0 : props.ui : undefined) ? CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,

package/dist/es2019/view/CardWithUrl/loader.js

@@ -2,6 +2,7 @@ import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { di } from 'react-magnetic-di';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { failUfoExperience, startUfoExperience } from '../../state/analytics';
 import { importWithRetry } from '../../utils';
@@ -49,7 +50,7 @@ export function CardWithURLRenderer(props) {
     resolvingPlaceholder,
     truncateInline
   } = props;
-  const isFlexibleUi = isFlexibleUiCard(children);
+  const isFlexibleUi = isFlexibleUiCard(children, fg('platform-linking-flexible-card-openness') ? ui : undefined);
   const analyticsContext = useSmartLinkAnalyticsContext({
     display: isFlexibleUi ? 'flexible' : appearance,
     id,

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

@@ -35,7 +35,7 @@ export const getChildrenOptions = (children, context) => {
   }
   return options;
 };
-const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => {
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick, removeBlockRestriction) => {
   return React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       if (isFlexibleUiTitleBlock(child)) {
@@ -76,6 +76,11 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
         status
       });
     }
+    if (fg('platform-linking-flexible-card-openness')) {
+      if (removeBlockRestriction) {
+        return child;
+      }
+    }
   });
 };
 const updateChildrenBlock = (node, size, status) => {
@@ -295,6 +300,7 @@ const Container = ({
   showHoverPreview = false,
   hoverPreviewOptions,
   actionOptions,
+  removeBlockRestriction = false,
   size = SmartLinkSize.Medium,
   status,
   testId = 'smart-links-container',
@@ -321,7 +327,7 @@ const Container = ({
       "--_73mooq": ix(previewOnLeft ? gap : padding),
       "--_12k13bg": ix(previewOnRight ? gap : padding)
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick)) : /*#__PURE__*/React.createElement("div", {
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction)) : /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
     className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMapOld[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMapOld[size], previewOnRight && previewOnRightStyleMapOld[size], !hideElevation && "_19ith6cr _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
@@ -330,7 +336,7 @@ const Container = ({
       "--_73mooq": ix(previewOnLeft ? gap : padding),
       "--_12k13bg": ix(previewOnRight ? gap : padding)
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return /*#__PURE__*/React.createElement(HoverCardControl, {
       isHoverPreview: canShowHoverPreview,

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

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * This file contains export components and API for FlexibleCard components.
+ * For internal usage for access to all available props, please use following
+ * - ./components/elements for metadata component
+ * - ./components/actions for action component
+ *
+ * DO NOT add a new prop to these components until we are ready to support it externally.
+ */
+import React from 'react';
+import { AssignedTo, AssignedToGroup, AttachmentCount, AuthorGroup, ChecklistProgress, CollaboratorGroup, CommentCount, CreatedBy, CreatedOn, DueOn, LatestCommit, LinkIcon, Location, ModifiedBy, ModifiedOn, OwnedBy, OwnedByGroup, Preview, Priority, ProgrammingLanguage, Provider, ReactCount, ReadTime, SentOn, Snippet, SourceBranch, State, StoryPoints, SubscriberCount, SubTasksProgress, TargetBranch, Title, ViewCount, VoteCount } from './components/elements';
+// ---- EXPORTED METADATA COMPONENT ---- //
+export const AssignedToElement = () => /*#__PURE__*/React.createElement(AssignedTo, null);
+export const AssignedToGroupElement = () => /*#__PURE__*/React.createElement(AssignedToGroup, null);
+export const AttachmentCountElement = () => /*#__PURE__*/React.createElement(AttachmentCount, null);
+export const AuthorGroupElement = () => /*#__PURE__*/React.createElement(AuthorGroup, null);
+export const ChecklistProgressElement = () => /*#__PURE__*/React.createElement(ChecklistProgress, null);
+export const CollaboratorGroupElement = () => /*#__PURE__*/React.createElement(CollaboratorGroup, null);
+export const CommentCountElement = () => /*#__PURE__*/React.createElement(CommentCount, null);
+export const CreatedOnElement = () => /*#__PURE__*/React.createElement(CreatedOn, null);
+export const CreatedByElement = () => /*#__PURE__*/React.createElement(CreatedBy, null);
+export const DueOnElement = () => /*#__PURE__*/React.createElement(DueOn, null);
+export const LatestCommitElement = () => /*#__PURE__*/React.createElement(LatestCommit, null);
+export const LinkIconElement = () => /*#__PURE__*/React.createElement(LinkIcon, null);
+export const LocationElement = () => /*#__PURE__*/React.createElement(Location, null);
+export const ModifiedByElement = () => /*#__PURE__*/React.createElement(ModifiedBy, null);
+export const ModifiedOnElement = () => /*#__PURE__*/React.createElement(ModifiedOn, null);
+export const OwnedByElement = () => /*#__PURE__*/React.createElement(OwnedBy, null);
+export const OwnedByGroupElement = () => /*#__PURE__*/React.createElement(OwnedByGroup, null);
+export const PreviewElement = () => /*#__PURE__*/React.createElement(Preview, null);
+export const PriorityElement = () => /*#__PURE__*/React.createElement(Priority, null);
+export const ProgrammingLanguageElement = () => /*#__PURE__*/React.createElement(ProgrammingLanguage, null);
+export const ProviderElement = () => /*#__PURE__*/React.createElement(Provider, null);
+export const ReactCountElement = () => /*#__PURE__*/React.createElement(ReactCount, null);
+export const ReadTimeElement = () => /*#__PURE__*/React.createElement(ReadTime, null);
+export const SentOnElement = () => /*#__PURE__*/React.createElement(SentOn, null);
+export const SnippetElement = props => /*#__PURE__*/React.createElement(Snippet, {
+  maxLines: props.maxLines,
+  content: props.text
+});
+export const SourceBranchElement = () => /*#__PURE__*/React.createElement(SourceBranch, null);
+export const StateElement = () => /*#__PURE__*/React.createElement(State, null);
+export const StoryPointsElement = () => /*#__PURE__*/React.createElement(StoryPoints, null);
+export const SubscriberCountElement = () => /*#__PURE__*/React.createElement(SubscriberCount, null);
+export const SubTasksProgressElement = () => /*#__PURE__*/React.createElement(SubTasksProgress, null);
+export const TargetBranchElement = () => /*#__PURE__*/React.createElement(TargetBranch, null);
+export const TitleElement = props => /*#__PURE__*/React.createElement(Title, _extends({
+  hideTooltip: props === null || props === void 0 ? void 0 : props.hideTooltip,
+  maxLines: props === null || props === void 0 ? void 0 : props.maxLines,
+  target: props === null || props === void 0 ? void 0 : props.target
+}, props !== null && props !== void 0 && props.text ? {
+  text: props === null || props === void 0 ? void 0 : props.text
+} : undefined));
+export const ViewCountElement = () => /*#__PURE__*/React.createElement(ViewCount, null);
+export const VoteCountElement = () => /*#__PURE__*/React.createElement(VoteCount, null);

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: "36.5.0",
+  packageVersion: "36.6.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -1,10 +1,9 @@
 
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._195gmgjw{margin-inline:var(--ds-space-negative-200,-1pc)}
-._1kl71vrj{border-left:2px solid transparent}
-._1kl7neh2{border-left:2px solid var(--ds-border-selected,#0c66e4)}
+._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
+._195g10v4{margin-inline:var(--ds-space-negative-300,-24px)}
+._16qs1kf8{box-shadow:inset 2px 0 0 0 var(--ds-border-selected,#0c66e4)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
@@ -14,7 +13,4 @@
 ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
 ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
 ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
-._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
-._1ohyglyw:active{outline-style:none}
-._1q5t1r31:active{outline-color:currentColor}
-._1r9x1o36:active{outline-width:medium}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/index.js

@@ -31,7 +31,7 @@ const RelatedLinkItem = ({
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": testId,
     onFocus: onFocus,
-    className: ax([fg('platform-linking-visual-refresh-v2') && "_195gmgjw _18zrpxbi _1kl71vrj", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_1kl7neh2 _bfhkfg4m _irr3i1yw _1q5t1r31 _1ohyglyw _1r9x1o36 _1di619ru"])
+    className: ax([fg('platform-linking-visual-refresh-v2') && "_195g10v4 _18zr1ejb", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_bfhkfg4m _16qs1kf8 _irr3i1yw _1di619ru"])
   }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",
     ui: ui,

package/dist/es2019/view/RelatedLinksModal/views/errored/error-svg/search-no-result/index.js

@@ -3,11 +3,42 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useThemeObserver } from "@atlaskit/tokens";
 const SIZE = 100;
 const genericErrorStyles = null;
 const id = 'related-links-unavailable-svg';
 export const SpotSearchNoResult = props => {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  const {
+    colorMode
+  } = useThemeObserver();
+  return colorMode === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({
+    "data-testid": id,
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_1bsb53f4 _4t3i53f4 _1e0c1ule"])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.44 191.28C108.24 191.28 93.7 185.56 81.19 174.27C77.54 170.97 74.05 167.18 70.82 163.01C67.55 158.78 64.72 154.39 62.43 149.97C49.09 124.3 53.13 96.9499 73.52 74.9399C76.97 71.2199 80.85 67.6799 85.05 64.4299C89.1 61.2999 93.32 58.5299 97.59 56.2099C123.97 41.8999 151.49 44.8899 173.08 64.3999C176.77 67.7399 180.3 71.5699 183.58 75.7999C186.81 79.9699 189.6 84.2999 191.88 88.6599C205.36 114.45 201.32 141.84 180.8 163.8C177.49 167.35 173.75 170.74 169.69 173.87C165.48 177.12 161.08 179.99 156.62 182.39C145.57 188.33 134.33 191.27 123.44 191.27V191.28ZM130.69 60.9799C122.04 60.9799 113.08 63.3899 104.12 68.2599C100.5 70.2299 96.9 72.5899 93.42 75.2699C89.81 78.0599 86.49 81.0799 83.56 84.2499C67.1 102.02 63.91 123.11 74.58 143.65C76.5 147.34 78.88 151.04 81.66 154.62C84.39 158.15 87.32 161.34 90.38 164.1C107.54 179.6 128.76 181.81 150.14 170.33C153.94 168.29 157.7 165.84 161.31 163.04C164.79 160.35 167.97 157.46 170.79 154.45C187.34 136.74 190.51 115.63 179.74 95.0099C177.84 91.3699 175.48 87.7199 172.75 84.1899C169.97 80.5999 167 77.3599 163.91 74.5699C153.91 65.5399 142.59 60.9799 130.71 60.9799H130.69Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#7E8188"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M133.191 135.999H123.188V135.365C122.847 128.249 126.886 120.545 132.628 117.392L132.735 117.335C132.891 117.254 133.041 117.16 133.187 117.063C136.32 115.043 138.103 111.565 137.993 107.733C137.884 103.937 135.925 100.598 132.753 98.8051C130.749 97.6711 128.515 97.0723 126.29 97.0723C119.516 97.0723 114.005 102.622 114.005 109.443H104C104 97.0689 113.999 87 126.289 87C130.227 87 134.156 88.0454 137.652 90.0226C143.914 93.5645 147.78 100.077 147.991 107.443C148.204 114.843 144.699 121.603 138.619 125.524C138.21 125.793 137.793 126.041 137.38 126.258C134.995 127.598 132.999 131.723 133.183 134.947L133.191 136V135.999Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M127.222 141.775C127.726 141.691 128.277 141.64 128.84 141.64C129.318 141.64 129.859 141.668 130.429 141.765C133.69 142.3 136.342 144.587 136.986 148.149L136.991 148.175L136.996 148.203C137.078 148.699 137.13 149.24 137.13 149.81C137.13 150.377 137.079 150.924 136.992 151.43L136.99 151.44C136.36 155.039 133.666 157.318 130.418 157.847C129.857 157.94 129.334 157.97 128.84 157.97C128.267 157.97 127.732 157.918 127.243 157.839L127.241 157.839C123.977 157.31 121.312 155.027 120.665 151.466L120.659 151.437L120.654 151.408C120.573 150.919 120.52 150.387 120.52 149.81C120.52 149.24 120.572 148.699 120.654 148.203L120.659 148.174L120.665 148.145C121.315 144.567 123.99 142.316 127.219 141.775L127.222 141.775Z",
+    fill: "#4B4D51"
+  })) : /*#__PURE__*/React.createElement("svg", _extends({
     "data-testid": id,
     viewBox: "0 0 275 275",
     fill: "none",

package/dist/esm/index.js

@@ -14,5 +14,6 @@ export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/L
 // Flexible UI
 export { ActionName, ElementName, MediaPlacement, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, CustomBlock } from './view/FlexibleCard/components/blocks';
+export { AssignedToElement, AssignedToGroupElement, AttachmentCountElement, AuthorGroupElement, ChecklistProgressElement, CollaboratorGroupElement, CommentCountElement, CreatedOnElement, CreatedByElement, DueOnElement, LatestCommitElement, LinkIconElement, LocationElement, ModifiedByElement, ModifiedOnElement, OwnedByElement, OwnedByGroupElement, PreviewElement, PriorityElement, ProgrammingLanguageElement, ProviderElement, ReactCountElement, ReadTimeElement, SentOnElement, SnippetElement, SourceBranchElement, StateElement, StoryPointsElement, SubscriberCountElement, SubTasksProgressElement, TargetBranchElement, TitleElement, ViewCountElement, VoteCountElement } from './view/FlexibleCard/external';
 /** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-661 Internal documentation for deprecation (no external access)} */
 export { editorCardProvider, EditorCardProvider } from '@atlaskit/link-provider';

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

package/dist/esm/utils/flexible.js

@@ -1,8 +1,15 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
 import { FooterBlock, PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
-export var isFlexibleUiCard = function isFlexibleUiCard(children) {
+export var isFlexibleUiCard = function isFlexibleUiCard(children, ui) {
+  if (fg('platform-linking-flexible-card-openness')) {
+    if (ui !== null && ui !== void 0 && ui.removeBlockRestriction) {
+      var _React$Children$toArr;
+      return children && ((_React$Children$toArr = React.Children.toArray(children)) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.length) > 0 ? true : false;
+    }
+  }
   if (children && React.Children.toArray(children).some(function (child) {
     return _isFlexibleUiTitleBlock(child);
   })) {

package/dist/esm/view/CardWithUrl/component.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
@@ -57,8 +58,8 @@ function Component(_ref) {
   var resourceType = getResourceType(state.details);
   var services = getServices(state.details);
   var isFlexibleUi = useMemo(function () {
-    return isFlexibleUiCard(children);
-  }, [children]);
+    return isFlexibleUiCard(children, fg('platform-linking-flexible-card-openness') ? ui : undefined);
+  }, [children, ui]);
   var actionOptions = combineActionOptions({
     actionOptions: actionOptionsProp,
     platform: platform
@@ -262,7 +263,7 @@ function Component(_ref) {
   }
 }
 export var CardWithUrlContent = function CardWithUrlContent(props) {
-  var display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
+  var display = isFlexibleUiCard(props.children, fg('platform-linking-flexible-card-openness') ? props === null || props === void 0 ? void 0 : props.ui : undefined) ? CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,

package/dist/esm/view/CardWithUrl/loader.js

@@ -6,6 +6,7 @@ import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { di } from 'react-magnetic-di';
 import uuid from 'uuid';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { failUfoExperience, startUfoExperience } from '../../state/analytics';
 import { importWithRetry } from '../../utils';
@@ -58,7 +59,7 @@ export function CardWithURLRenderer(props) {
     removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
     resolvingPlaceholder = props.resolvingPlaceholder,
     truncateInline = props.truncateInline;
-  var isFlexibleUi = isFlexibleUiCard(children);
+  var isFlexibleUi = isFlexibleUiCard(children, fg('platform-linking-flexible-card-openness') ? ui : undefined);
   var analyticsContext = useSmartLinkAnalyticsContext({
     display: isFlexibleUi ? 'flexible' : appearance,
     id: id,

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -39,7 +39,7 @@ export var getChildrenOptions = function getChildrenOptions(children, context) {
   }
   return options;
 };
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, removeBlockRestriction) {
   return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
       if (isFlexibleUiTitleBlock(child)) {
@@ -76,6 +76,11 @@ var renderChildren = function renderChildren(children, containerSize, containerT
         status: status
       });
     }
+    if (fg('platform-linking-flexible-card-openness')) {
+      if (removeBlockRestriction) {
+        return child;
+      }
+    }
   });
 };
 var updateChildrenBlock = function updateChildrenBlock(node, size, status) {
@@ -301,6 +306,8 @@ var Container = function Container(_ref5) {
     showHoverPreview = _ref5$showHoverPrevie === void 0 ? false : _ref5$showHoverPrevie,
     hoverPreviewOptions = _ref5.hoverPreviewOptions,
     actionOptions = _ref5.actionOptions,
+    _ref5$removeBlockRest = _ref5.removeBlockRestriction,
+    removeBlockRestriction = _ref5$removeBlockRest === void 0 ? false : _ref5$removeBlockRest,
     _ref5$size = _ref5.size,
     size = _ref5$size === void 0 ? SmartLinkSize.Medium : _ref5$size,
     status = _ref5.status,
@@ -329,7 +336,7 @@ var Container = function Container(_ref5) {
       "--_12k13bg": ix(previewOnRight ? gap : padding),
       "--_18x9sjc": ix("1px solid ".concat("var(--ds-border, #091E4224)"))
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick)) : /*#__PURE__*/React.createElement("div", {
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction)) : /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
     className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMapOld[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMapOld[size], previewOnRight && previewOnRightStyleMapOld[size], !hideElevation && "_19itn8v0 _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
@@ -339,7 +346,7 @@ var Container = function Container(_ref5) {
       "--_12k13bg": ix(previewOnRight ? gap : padding),
       "--_vzvmm2": ix("1px solid ".concat("var(--ds-border, ".concat(N40, ")")))
     }
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, removeBlockRestriction));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return /*#__PURE__*/React.createElement(HoverCardControl, {
       isHoverPreview: canShowHoverPreview,

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

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * This file contains export components and API for FlexibleCard components.
+ * For internal usage for access to all available props, please use following
+ * - ./components/elements for metadata component
+ * - ./components/actions for action component
+ *
+ * DO NOT add a new prop to these components until we are ready to support it externally.
+ */
+import React from 'react';
+import { AssignedTo, AssignedToGroup, AttachmentCount, AuthorGroup, ChecklistProgress, CollaboratorGroup, CommentCount, CreatedBy, CreatedOn, DueOn, LatestCommit, LinkIcon, Location, ModifiedBy, ModifiedOn, OwnedBy, OwnedByGroup, Preview, Priority, ProgrammingLanguage, Provider, ReactCount, ReadTime, SentOn, Snippet, SourceBranch, State, StoryPoints, SubscriberCount, SubTasksProgress, TargetBranch, Title, ViewCount, VoteCount } from './components/elements';
+// ---- EXPORTED METADATA COMPONENT ---- //
+export var AssignedToElement = function AssignedToElement() {
+  return /*#__PURE__*/React.createElement(AssignedTo, null);
+};
+export var AssignedToGroupElement = function AssignedToGroupElement() {
+  return /*#__PURE__*/React.createElement(AssignedToGroup, null);
+};
+export var AttachmentCountElement = function AttachmentCountElement() {
+  return /*#__PURE__*/React.createElement(AttachmentCount, null);
+};
+export var AuthorGroupElement = function AuthorGroupElement() {
+  return /*#__PURE__*/React.createElement(AuthorGroup, null);
+};
+export var ChecklistProgressElement = function ChecklistProgressElement() {
+  return /*#__PURE__*/React.createElement(ChecklistProgress, null);
+};
+export var CollaboratorGroupElement = function CollaboratorGroupElement() {
+  return /*#__PURE__*/React.createElement(CollaboratorGroup, null);
+};
+export var CommentCountElement = function CommentCountElement() {
+  return /*#__PURE__*/React.createElement(CommentCount, null);
+};
+export var CreatedOnElement = function CreatedOnElement() {
+  return /*#__PURE__*/React.createElement(CreatedOn, null);
+};
+export var CreatedByElement = function CreatedByElement() {
+  return /*#__PURE__*/React.createElement(CreatedBy, null);
+};
+export var DueOnElement = function DueOnElement() {
+  return /*#__PURE__*/React.createElement(DueOn, null);
+};
+export var LatestCommitElement = function LatestCommitElement() {
+  return /*#__PURE__*/React.createElement(LatestCommit, null);
+};
+export var LinkIconElement = function LinkIconElement() {
+  return /*#__PURE__*/React.createElement(LinkIcon, null);
+};
+export var LocationElement = function LocationElement() {
+  return /*#__PURE__*/React.createElement(Location, null);
+};
+export var ModifiedByElement = function ModifiedByElement() {
+  return /*#__PURE__*/React.createElement(ModifiedBy, null);
+};
+export var ModifiedOnElement = function ModifiedOnElement() {
+  return /*#__PURE__*/React.createElement(ModifiedOn, null);
+};
+export var OwnedByElement = function OwnedByElement() {
+  return /*#__PURE__*/React.createElement(OwnedBy, null);
+};
+export var OwnedByGroupElement = function OwnedByGroupElement() {
+  return /*#__PURE__*/React.createElement(OwnedByGroup, null);
+};
+export var PreviewElement = function PreviewElement() {
+  return /*#__PURE__*/React.createElement(Preview, null);
+};
+export var PriorityElement = function PriorityElement() {
+  return /*#__PURE__*/React.createElement(Priority, null);
+};
+export var ProgrammingLanguageElement = function ProgrammingLanguageElement() {
+  return /*#__PURE__*/React.createElement(ProgrammingLanguage, null);
+};
+export var ProviderElement = function ProviderElement() {
+  return /*#__PURE__*/React.createElement(Provider, null);
+};
+export var ReactCountElement = function ReactCountElement() {
+  return /*#__PURE__*/React.createElement(ReactCount, null);
+};
+export var ReadTimeElement = function ReadTimeElement() {
+  return /*#__PURE__*/React.createElement(ReadTime, null);
+};
+export var SentOnElement = function SentOnElement() {
+  return /*#__PURE__*/React.createElement(SentOn, null);
+};
+export var SnippetElement = function SnippetElement(props) {
+  return /*#__PURE__*/React.createElement(Snippet, {
+    maxLines: props.maxLines,
+    content: props.text
+  });
+};
+export var SourceBranchElement = function SourceBranchElement() {
+  return /*#__PURE__*/React.createElement(SourceBranch, null);
+};
+export var StateElement = function StateElement() {
+  return /*#__PURE__*/React.createElement(State, null);
+};
+export var StoryPointsElement = function StoryPointsElement() {
+  return /*#__PURE__*/React.createElement(StoryPoints, null);
+};
+export var SubscriberCountElement = function SubscriberCountElement() {
+  return /*#__PURE__*/React.createElement(SubscriberCount, null);
+};
+export var SubTasksProgressElement = function SubTasksProgressElement() {
+  return /*#__PURE__*/React.createElement(SubTasksProgress, null);
+};
+export var TargetBranchElement = function TargetBranchElement() {
+  return /*#__PURE__*/React.createElement(TargetBranch, null);
+};
+export var TitleElement = function TitleElement(props) {
+  return /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: props === null || props === void 0 ? void 0 : props.hideTooltip,
+    maxLines: props === null || props === void 0 ? void 0 : props.maxLines,
+    target: props === null || props === void 0 ? void 0 : props.target
+  }, props !== null && props !== void 0 && props.text ? {
+    text: props === null || props === void 0 ? void 0 : props.text
+  } : undefined));
+};
+export var ViewCountElement = function ViewCountElement() {
+  return /*#__PURE__*/React.createElement(ViewCount, null);
+};
+export var VoteCountElement = function VoteCountElement() {
+  return /*#__PURE__*/React.createElement(VoteCount, null);
+};

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

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

package/dist/esm/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -1,10 +1,9 @@
 
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulputpp{gap:var(--ds-space-150,9pt)}
-._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._195gmgjw{margin-inline:var(--ds-space-negative-200,-1pc)}
-._1kl71vrj{border-left:2px solid transparent}
-._1kl7nmxp{border-left:var(--_nu2mv8)}
+._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
+._195g10v4{margin-inline:var(--ds-space-negative-300,-24px)}
+._16qsd1ld{box-shadow:var(--_g94mg3)}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
@@ -14,7 +13,4 @@
 ._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
 ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
 ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
-._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
-._1ohyglyw:active{outline-style:none}
-._1q5t1r31:active{outline-color:currentColor}
-._1r9x1o36:active{outline-width:medium}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/esm/view/RelatedLinksModal/components/related-link-item/index.js

@@ -30,9 +30,9 @@ var RelatedLinkItem = function RelatedLinkItem(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": testId,
     onFocus: onFocus,
-    className: ax([fg('platform-linking-visual-refresh-v2') && "_195gmgjw _18zrpxbi _1kl71vrj", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_1kl7nmxp _bfhkfg4m _irr3i1yw _1q5t1r31 _1ohyglyw _1r9x1o36 _1di619ru"]),
+    className: ax([fg('platform-linking-visual-refresh-v2') && "_195g10v4 _18zr1ejb", fg('platform-linking-visual-refresh-v2') ? "_irr3166n _1di61dty" : "_8vu4iti9 _1mxox0bf _10swu2gc _irr31d5g", isSelected && fg('platform-linking-visual-refresh-v2') && "_bfhkfg4m _16qsd1ld _irr3i1yw _1di619ru"]),
     style: {
-      "--_nu2mv8": ix("2px solid ".concat("var(--ds-border-selected, #0C66E4)"))
+      "--_g94mg3": ix("inset 2px 0 0 0 ".concat("var(--ds-border-selected, #0C66E4)"))
     }
   }, /*#__PURE__*/React.createElement(Card, {
     appearance: "block",

package/dist/esm/view/RelatedLinksModal/views/errored/error-svg/search-no-result/index.js

@@ -3,11 +3,44 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useThemeObserver } from "@atlaskit/tokens";
 var SIZE = 100;
 var genericErrorStyles = null;
 var id = 'related-links-unavailable-svg';
 export var SpotSearchNoResult = function SpotSearchNoResult(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  return colorMode === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({
+    "data-testid": id,
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    className: ax(["_1bsbwdok _4t3iwdok _1e0c1ule"]),
+    style: {
+      "--_cjikvn": ix("".concat(SIZE, "px"))
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.44 191.28C108.24 191.28 93.7 185.56 81.19 174.27C77.54 170.97 74.05 167.18 70.82 163.01C67.55 158.78 64.72 154.39 62.43 149.97C49.09 124.3 53.13 96.9499 73.52 74.9399C76.97 71.2199 80.85 67.6799 85.05 64.4299C89.1 61.2999 93.32 58.5299 97.59 56.2099C123.97 41.8999 151.49 44.8899 173.08 64.3999C176.77 67.7399 180.3 71.5699 183.58 75.7999C186.81 79.9699 189.6 84.2999 191.88 88.6599C205.36 114.45 201.32 141.84 180.8 163.8C177.49 167.35 173.75 170.74 169.69 173.87C165.48 177.12 161.08 179.99 156.62 182.39C145.57 188.33 134.33 191.27 123.44 191.27V191.28ZM130.69 60.9799C122.04 60.9799 113.08 63.3899 104.12 68.2599C100.5 70.2299 96.9 72.5899 93.42 75.2699C89.81 78.0599 86.49 81.0799 83.56 84.2499C67.1 102.02 63.91 123.11 74.58 143.65C76.5 147.34 78.88 151.04 81.66 154.62C84.39 158.15 87.32 161.34 90.38 164.1C107.54 179.6 128.76 181.81 150.14 170.33C153.94 168.29 157.7 165.84 161.31 163.04C164.79 160.35 167.97 157.46 170.79 154.45C187.34 136.74 190.51 115.63 179.74 95.0099C177.84 91.3699 175.48 87.7199 172.75 84.1899C169.97 80.5999 167 77.3599 163.91 74.5699C153.91 65.5399 142.59 60.9799 130.71 60.9799H130.69Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#7E8188"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M133.191 135.999H123.188V135.365C122.847 128.249 126.886 120.545 132.628 117.392L132.735 117.335C132.891 117.254 133.041 117.16 133.187 117.063C136.32 115.043 138.103 111.565 137.993 107.733C137.884 103.937 135.925 100.598 132.753 98.8051C130.749 97.6711 128.515 97.0723 126.29 97.0723C119.516 97.0723 114.005 102.622 114.005 109.443H104C104 97.0689 113.999 87 126.289 87C130.227 87 134.156 88.0454 137.652 90.0226C143.914 93.5645 147.78 100.077 147.991 107.443C148.204 114.843 144.699 121.603 138.619 125.524C138.21 125.793 137.793 126.041 137.38 126.258C134.995 127.598 132.999 131.723 133.183 134.947L133.191 136V135.999Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M127.222 141.775C127.726 141.691 128.277 141.64 128.84 141.64C129.318 141.64 129.859 141.668 130.429 141.765C133.69 142.3 136.342 144.587 136.986 148.149L136.991 148.175L136.996 148.203C137.078 148.699 137.13 149.24 137.13 149.81C137.13 150.377 137.079 150.924 136.992 151.43L136.99 151.44C136.36 155.039 133.666 157.318 130.418 157.847C129.857 157.94 129.334 157.97 128.84 157.97C128.267 157.97 127.732 157.918 127.243 157.839L127.241 157.839C123.977 157.31 121.312 155.027 120.665 151.466L120.659 151.437L120.654 151.408C120.573 150.919 120.52 150.387 120.52 149.81C120.52 149.24 120.572 148.699 120.654 148.203L120.659 148.174L120.665 148.145C121.315 144.567 123.99 142.316 127.219 141.775L127.222 141.775Z",
+    fill: "#4B4D51"
+  })) : /*#__PURE__*/React.createElement("svg", _extends({
     "data-testid": id,
     viewBox: "0 0 275 275",
     fill: "none",

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, MediaPlacement, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, CustomBlock, } from './view/FlexibleCard/components/blocks';
+export { AssignedToElement, AssignedToGroupElement, AttachmentCountElement, AuthorGroupElement, ChecklistProgressElement, CollaboratorGroupElement, CommentCountElement, CreatedOnElement, CreatedByElement, DueOnElement, LatestCommitElement, LinkIconElement, LocationElement, ModifiedByElement, ModifiedOnElement, OwnedByElement, OwnedByGroupElement, PreviewElement, PriorityElement, ProgrammingLanguageElement, ProviderElement, ReactCountElement, ReadTimeElement, SentOnElement, SnippetElement, SourceBranchElement, StateElement, StoryPointsElement, SubscriberCountElement, SubTasksProgressElement, TargetBranchElement, TitleElement, ViewCountElement, VoteCountElement, } from './view/FlexibleCard/external';
 export type { ActionItem, ElementItem, OnActionMenuOpenChangeOptions, } from './view/FlexibleCard/components/blocks/types';
 export type { AnalyticsAction, AnalyticsActionSubject, AnalyticsPayload, AnalyticsHandler, } from './utils/types';
 /** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-661 Internal documentation for deprecation (no external access)} */

package/dist/types/utils/flexible.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export declare const isFlexibleUiCard: (children?: React.ReactNode) => boolean;
+import { type FlexibleUiOptions } from '../view/FlexibleCard/types';
+export declare const isFlexibleUiCard: (children?: React.ReactNode, ui?: FlexibleUiOptions) => boolean;
 export declare const isStyleCacheProvider: (node: React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) => boolean;
 export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;