@atlaskit/smart-card 26.48.3 → 26.48.4

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -13,7 +12,7 @@ const badgeStyles = css`
   min-width: fit-content;
 `;
 const iconStyles = css`
-  color: ${tokens.badgeIcon};
+  color: ${"var(--ds-icon-subtle, #626F86)"};
   line-height: 0;
   vertical-align: middle;
   ${getIconSizeStyles('1rem')}
@@ -25,7 +24,7 @@ const iconStyles = css`
   }
 `;
 const labelStyles = css`
-  color: ${tokens.badgeText};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 0.125rem;

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

@@ -4,11 +4,10 @@ import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
 const styles = css`
-  color: ${tokens.text};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(1)}

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

@@ -5,7 +5,6 @@ import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
@@ -34,24 +33,24 @@ const getThemeStyles = theme => {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css`
-        color: ${tokens.blackLink};
+        color: ${"var(--ds-text-subtle, #44546F)"};
         :active {
-          color: ${tokens.blackLinkPressed};
+          color: ${"var(--ds-text, #172B4D)"};
         }
         :hover {
-          color: ${tokens.blackLink};
+          color: ${"var(--ds-text-subtle, #44546F)"};
           text-decoration: underline;
         }
       `;
     case SmartLinkTheme.Link:
     default:
       return css`
-        color: ${tokens.blueLink};
+        color: ${"var(--ds-link, #0C66E4)"};
         :active {
-          color: ${tokens.blueLinkPressed};
+          color: ${"var(--ds-link-pressed, #0055CC)"};
         }
         :hover {
-          color: ${tokens.blueLink};
+          color: ${"var(--ds-link, #0C66E4)"};
           text-decoration: underline;
         }
       `;

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

@@ -2,9 +2,8 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 const getStyles = maxLines => css`
-  color: ${tokens.text};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   white-space: normal;

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.3",
+  packageVersion: "26.48.4",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.3"
+  packageVersion: "26.48.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/index.js

@@ -341,4 +341,17 @@ export var openUrl = /*#__PURE__*/function () {
   return function openUrl(_x3) {
     return _ref3.apply(this, arguments);
   };
-}();
+}();
+
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export var combineFrameStyle = function combineFrameStyle(frameStyle, isFrameVisible) {
+  if (frameStyle !== undefined) {
+    return frameStyle;
+  }
+  if (isFrameVisible) {
+    return 'show';
+  }
+};

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
-import { isSpecialEvent } from '../../utils';
+import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
 import { useSmartLink } from '../../state';
@@ -20,7 +20,7 @@ function Component(_ref) {
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
     isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    frameStyleProp = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
     appearance = _ref.appearance,
@@ -65,6 +65,7 @@ function Component(_ref) {
   }, [children]);
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   var actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
+  var frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
   // Setup UI handlers.
   var handleClickWrapper = useCallback(function (event) {
@@ -251,7 +252,6 @@ function Component(_ref) {
         handleInvoke: handleInvoke,
         analytics: analytics,
         isSelected: isSelected,
-        isFrameVisible: isFrameVisible,
         frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
@@ -10,8 +10,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     icon = _ref.icon,
     text = _ref.text,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    _ref$frameStyle = _ref.frameStyle,
+    frameStyle = _ref$frameStyle === void 0 ? 'showOnHover' : _ref$frameStyle,
     href = _ref.href,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -27,9 +27,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return handleClickCommon(event, onClick);
   };
   var handleMouseDown = useMouseDownEvent();
-  var calculatedFrameStyle = useMemo(function () {
-    return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
-  }, [frameStyle, isFrameVisible]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       className: "embed-header",
@@ -57,7 +54,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
       "data-testid": testId,
@@ -73,7 +70,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       maxWidth: maxWidth,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,

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

@@ -26,7 +26,6 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
     analytics = _ref.analytics,
     handleInvoke = _ref.handleInvoke,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onResolve = _ref.onResolve,
@@ -64,7 +63,6 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       if (resolvedViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
@@ -107,6 +105,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         analytics: analytics,
         context: unauthorisedViewProps.context,
         extensionKey: extensionKey,
+        frameStyle: frameStyle,
         isProductIntegrationSupported: isProductIntegrationSupported,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
@@ -127,8 +126,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       if (forbiddenViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, forbiddenViewProps, {
           title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef
@@ -142,6 +141,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       });
       return /*#__PURE__*/React.createElement(ForbiddenView, {
         context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onAuthorize: handleAuthorize,
@@ -165,6 +165,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }) : undefined;
       return /*#__PURE__*/React.createElement(NotFoundView, {
         context: notFoundViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -11,7 +11,6 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     context = _ref.context,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     preview = _ref.preview,
     title = _ref.title,
@@ -49,7 +48,6 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
-    isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     href: link,
     testId: testId,

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -8,6 +8,7 @@ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleSt
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
+    frameStyle = _ref.frameStyle,
     iconUrlOrElement = _ref.icon,
     image = _ref.image,
     inheritDimensions = _ref.inheritDimensions,
@@ -31,8 +32,15 @@ var UnresolvedView = function UnresolvedView(_ref) {
     });
   }, [iconUrlOrElement]);
   return jsx(ExpandedFrame, {
-    allowScrollBar: true,
-    frameStyle: "show",
+    allowScrollBar: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
     href: url,
     icon: icon,
     inheritDimensions: inheritDimensions,

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -7,8 +7,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 import { ActionName } from '../../../../../../constants';
@@ -68,8 +66,7 @@ var PreviewAction = function PreviewAction(props) {
         if (_onClick) {
           _onClick();
         }
-      },
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+      }
     });
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -12,11 +12,10 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-import { tokens } from '../../../../../../utils/token';
-var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), tokens.errorMessageHover);
+var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage, tokens.focus);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
 };
 
 /**

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

@@ -5,7 +5,6 @@ import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
-import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
 import HoverCardControl from './hover-card-control';
@@ -68,7 +67,7 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return React.Children.map(children, function (child) {

package/dist/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -4,15 +4,14 @@ var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
-var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), tokens.badgeText);
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), "var(--ds-text-subtlest, #626F86)");
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -6,10 +6,9 @@ import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(1));
 var typeToDescriptorMap = {
   created: {
     relative: messages.created_on_relative,

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
@@ -21,10 +20,10 @@ var getThemeStyles = function getThemeStyles(theme) {
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-text-subtle, #44546F)", "var(--ds-text, #172B4D)", "var(--ds-text-subtle, #44546F)");
     case SmartLinkTheme.Link:
     default:
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blueLink, tokens.blueLinkPressed, tokens.blueLink);
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-link, #0C66E4)", "var(--ds-link-pressed, #0055CC)", "var(--ds-link, #0C66E4)");
   }
 };
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {

package/dist/esm/view/FlexibleCard/components/elements/text/index.js

@@ -4,9 +4,8 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(maxLines));
 };
 
 /**

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.3",
+  packageVersion: "26.48.4",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CardProps } from '../view/Card';
+import type { CardProps } from '../view/Card';
+import { FrameStyle } from '../view/EmbedCard/types';
 export declare const isCardWithData: (props: CardProps) => boolean;
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
@@ -23,3 +24,8 @@ export declare const sleep: (ms: number) => Promise<void>;
 export declare const importWithRetry: <T>(importFn: () => Promise<T>, retries?: number, interval?: number) => Promise<T>;
 export declare const downloadUrl: (url?: string) => Promise<void>;
 export declare const openUrl: (url?: string) => Promise<void>;
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export declare const combineFrameStyle: (frameStyle?: CardProps['frameStyle'], isFrameVisible?: CardProps['isFrameVisible']) => FrameStyle | undefined;

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -10,8 +10,6 @@ export interface ExpandedFrameProps {
     children?: React.ReactNode;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
-    /** @deprecated use frameStyle prop */
-    isFrameVisible?: boolean;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
     /** The optional click handler */

package/dist/types/view/EmbedCard/types.d.ts

@@ -16,7 +16,6 @@ export type EmbedCardProps = {
     handleInvoke: InvokeHandler;
     id?: string;
     isSelected?: boolean;
-    isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     platform?: CardPlatform;
     onResolve?: OnResolveCallback;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -9,8 +9,6 @@ export interface EmbedCardResolvedViewProps {
     link: string;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
-    /** will show the frame regardless of user interaction */
-    isFrameVisible?: boolean;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
     /** The src to be used for the `iframe` */

package/dist/types/view/EmbedCard/views/forbidden-view/types.d.ts

@@ -1,7 +1,7 @@
-import { RequestAccessContextProps } from '../../../types';
-import { ContextViewModel } from '../../types';
-import { UnresolvedViewProps } from '../unresolved-view/types';
-export type ForbiddenViewProps = Pick<UnresolvedViewProps, 'inheritDimensions' | 'isSelected' | 'onClick' | 'testId' | 'url'> & {
+import type { RequestAccessContextProps } from '../../../types';
+import type { ContextViewModel } from '../../types';
+import type { UnresolvedViewCardProps } from '../unresolved-view/types';
+export type ForbiddenViewProps = UnresolvedViewCardProps & {
     context?: ContextViewModel;
     onAuthorize?: () => void;
     accessContext: RequestAccessContextProps;

package/dist/types/view/EmbedCard/views/not-found-view/types.d.ts

@@ -1,7 +1,7 @@
-import { RequestAccessContextProps } from '../../../types';
-import { ContextViewModel } from '../../types';
-import { UnresolvedViewProps } from '../unresolved-view/types';
-export type NotFoundViewProps = Pick<UnresolvedViewProps, 'inheritDimensions' | 'isSelected' | 'onClick' | 'testId' | 'url'> & {
+import type { RequestAccessContextProps } from '../../../types';
+import type { ContextViewModel } from '../../types';
+import type { UnresolvedViewCardProps } from '../unresolved-view/types';
+export type NotFoundViewProps = UnresolvedViewCardProps & {
     context?: ContextViewModel;
     accessContext?: RequestAccessContextProps;
 };

package/dist/types/view/EmbedCard/views/unauthorized-view/types.d.ts

@@ -1,7 +1,7 @@
 import type { AnalyticsFacade } from '../../../../state/analytics';
-import { ContextViewModel } from '../../types';
-import { UnresolvedViewProps } from '../unresolved-view/types';
-export type UnauthorizedViewProps = Pick<UnresolvedViewProps, 'inheritDimensions' | 'isSelected' | 'onClick' | 'testId' | 'url'> & {
+import type { ContextViewModel } from '../../types';
+import type { UnresolvedViewCardProps } from '../unresolved-view/types';
+export type UnauthorizedViewProps = UnresolvedViewCardProps & {
     analytics: AnalyticsFacade;
     context?: ContextViewModel;
     extensionKey?: string;

package/dist/types/view/EmbedCard/views/unresolved-view/types.d.ts

@@ -1,5 +1,8 @@
-import type { MouseEvent, ReactNode } from 'react';
-export type UnresolvedViewProps = {
+import type { ReactNode } from 'react';
+import type { CardProps } from '../../../Card/types';
+/** Props derived from <Card /> for base embed functionalities */
+export type UnresolvedViewCardProps = Pick<CardProps, 'frameStyle' | 'inheritDimensions' | 'isSelected' | 'onClick' | 'testId' | 'url'>;
+export type UnresolvedViewProps = UnresolvedViewCardProps & {
     /** An action button */
     button?: ReactNode;
     /** A detail and instruction of the unresolved link */
@@ -8,18 +11,8 @@ export type UnresolvedViewProps = {
     icon: string | ReactNode;
     /** A provider or visual aids for the unresolved link */
     image: string;
-    /** A flag whether the embed frame should inherit parent dimension  */
-    inheritDimensions?: boolean;
-    /** A flag whether the embed frame is selected */
-    isSelected?: boolean;
-    /** An action when a link text is clicked */
-    onClick?: (evt: MouseEvent) => void;
     /** A link text displayed on embed frame */
     text?: string;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
-    testId?: string;
     /** A title for the unresolved link */
     title: ReactNode;
-    /** A link url */
-    url: string;
 };

package/dist/types-ts4.5/utils/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CardProps } from '../view/Card';
+import type { CardProps } from '../view/Card';
+import { FrameStyle } from '../view/EmbedCard/types';
 export declare const isCardWithData: (props: CardProps) => boolean;
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
@@ -23,3 +24,8 @@ export declare const sleep: (ms: number) => Promise<void>;
 export declare const importWithRetry: <T>(importFn: () => Promise<T>, retries?: number, interval?: number) => Promise<T>;
 export declare const downloadUrl: (url?: string) => Promise<void>;
 export declare const openUrl: (url?: string) => Promise<void>;
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export declare const combineFrameStyle: (frameStyle?: CardProps['frameStyle'], isFrameVisible?: CardProps['isFrameVisible']) => FrameStyle | undefined;

package/dist/types-ts4.5/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -10,8 +10,6 @@ export interface ExpandedFrameProps {
     children?: React.ReactNode;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
-    /** @deprecated use frameStyle prop */
-    isFrameVisible?: boolean;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
     /** The optional click handler */

package/dist/types-ts4.5/view/EmbedCard/types.d.ts

@@ -16,7 +16,6 @@ export type EmbedCardProps = {
     handleInvoke: InvokeHandler;
     id?: string;
     isSelected?: boolean;
-    isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     platform?: CardPlatform;
     onResolve?: OnResolveCallback;

package/dist/types-ts4.5/view/EmbedCard/views/ResolvedView.d.ts

@@ -9,8 +9,6 @@ export interface EmbedCardResolvedViewProps {
     link: string;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
-    /** will show the frame regardless of user interaction */
-    isFrameVisible?: boolean;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
     /** The src to be used for the `iframe` */

package/dist/types-ts4.5/view/EmbedCard/views/forbidden-view/types.d.ts

@@ -1,7 +1,7 @@
-import { RequestAccessContextProps } from '../../../types';
-import { ContextViewModel } from '../../types';
-import { UnresolvedViewProps } from '../unresolved-view/types';
-export type ForbiddenViewProps = Pick<UnresolvedViewProps, 'inheritDimensions' | 'isSelected' | 'onClick' | 'testId' | 'url'> & {
+import type { RequestAccessContextProps } from '../../../types';
+import type { ContextViewModel } from '../../types';
+import type { UnresolvedViewCardProps } from '../unresolved-view/types';
+export type ForbiddenViewProps = UnresolvedViewCardProps & {
     context?: ContextViewModel;
     onAuthorize?: () => void;
     accessContext: RequestAccessContextProps;