@atlaskit/smart-card 26.3.2 → 26.3.4

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -1,13 +1,15 @@
 import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const containerStyles = css`
   align-items: center;
   display: flex;
-  gap: 8px;
+  gap: ${"var(--ds-space-100, 8px)"};
   justify-content: space-between;
   // AK ModalBody has 2px padding top and bottom.
   // Using 14px here to create 16px gap between
   // link info and iframe
-  padding: 24px 24px 14px 24px;
+  padding: ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-300, 24px)"} 14px
+    ${"var(--ds-space-300, 24px)"};
 `;
 const iconSize = '24px';
 export const iconCss = css`
@@ -48,7 +50,7 @@ export const titleCss = css`
 export const actionCss = css`
   display: flex;
   flex: 0 0 auto;
-  gap: 4px;
+  gap: ${"var(--ds-space-050, 4px)"};
   line-height: ${height};
   span {
     line-height: ${height};

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -33,6 +33,8 @@ export const contentStyles = css`
     color: ${`var(--ds-text, ${N800})`};
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const linkStyles = css`
   ${sharedBlockStyles};
 

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -14,7 +14,7 @@ export const triggerButtonStyles = css`
   text-transform: unset;
 
   border: 2px solid transparent;
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 
   &:focus-visible,
   &:focus-within,
@@ -24,12 +24,16 @@ export const triggerButtonStyles = css`
     border-radius: 5px;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const triggerLozengeStyles = css`
   align-items: center;
   display: flex;
 
   span[role='img'] {
-    margin: -4px -8px -4px -1px;
+    margin: calc(-1 * ${"var(--ds-space-050, 4px)"})
+      calc(-1 * ${"var(--ds-space-100, 8px)"})
+      calc(-1 * ${"var(--ds-space-050, 4px)"}) -1px;
   }
 `;
 export const dropdownItemGroupStyles = css`
@@ -37,7 +41,7 @@ export const dropdownItemGroupStyles = css`
   overflow-y: auto;
 
   button {
-    padding: 6px 12px;
+    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"};
     min-height: 28px;
     width: 220px;
 

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

@@ -12,7 +12,7 @@ const elevationStyles = css`
   border: 1px solid transparent;
   border-radius: 1.5px;
   box-shadow: ${tokens.elevation};
-  margin: 2px;
+  margin: ${"var(--ds-space-025, 2px)"};
 `;
 const getGap = size => {
   switch (size) {

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -11,6 +11,7 @@ import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
+const HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 export const HoverCardComponent = ({
   children,
   url,
@@ -45,18 +46,24 @@ export const HoverCardComponent = ({
     };
   }, [isOpen]);
   const hideCard = useCallback(() => {
-    //Check its previously open to avoid firing events when moving between the child and hover card components
-    if (isOpen === true && cardOpenTime.current) {
-      const hoverTime = Date.now() - cardOpenTime.current;
-      analytics.ui.hoverCardDismissedEvent({
-        previewDisplay: 'card',
-        hoverTime,
-        previewInvokeMethod: 'mouse_hover',
-        status: linkStatus
-      });
+    if (getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+      /**
+       * Defer to inner HoverCardContent to fire this event
+       */
+    } else {
+      //Check its previously open to avoid firing events when moving between the child and hover card components
+      if (isOpen === true && cardOpenTime.current) {
+        const hoverTime = Date.now() - cardOpenTime.current;
+        analytics === null || analytics === void 0 ? void 0 : analytics.ui.hoverCardDismissedEvent({
+          previewDisplay: 'card',
+          hoverTime,
+          previewInvokeMethod: 'mouse_hover',
+          status: linkStatus
+        });
+      }
     }
     setIsOpen(false);
-  }, [analytics.ui, isOpen, linkStatus]);
+  }, [analytics, isOpen, linkStatus]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
@@ -70,14 +77,20 @@ export const HoverCardComponent = ({
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
     fadeInTimeoutId.current = setTimeout(() => {
-      //Check if its previously closed to avoid firing events when moving between the child and hover card components
-      if (isOpen === false) {
-        cardOpenTime.current = Date.now();
-        analytics.ui.hoverCardViewedEvent({
-          previewDisplay: hoverDisplay,
-          previewInvokeMethod: invokeMethod,
-          status: linkStatus
-        });
+      if (getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+        /**
+         * Defer to inner HoverCardContent to fire this event
+         */
+      } else {
+        //Check if its previously closed to avoid firing events when moving between the child and hover card components
+        if (isOpen === false) {
+          cardOpenTime.current = Date.now();
+          analytics === null || analytics === void 0 ? void 0 : analytics.ui.hoverCardViewedEvent({
+            previewDisplay: hoverDisplay,
+            previewInvokeMethod: invokeMethod,
+            status: linkStatus
+          });
+        }
       }
       //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
       if (parentSpan.current && mousePos.current) {
@@ -89,12 +102,12 @@ export const HoverCardComponent = ({
       }
       setIsOpen(true);
     }, delay);
-  }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
+  }, [isOpen, setMousePosition, analytics, linkStatus]);
   const linkActions = useSmartLinkActions({
     url,
     appearance: CardDisplay.HoverCardPreview,
     analyticsHandler,
-    origin: 'smartLinkPreviewHoverCard'
+    origin: HOVER_CARD_SOURCE
   });
   const filteredActions = useMemo(() => {
     return hidePreviewButton ? linkActions.filter(action => action.id !== 'preview-content') : linkActions;
@@ -115,34 +128,29 @@ export const HoverCardComponent = ({
   }, [closeOnChildClick, hideCard]);
   const content = useCallback(({
     update
-  }) => getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
-    url: url,
-    appearance: CardDisplay.HoverCardPreview,
-    id: id
-  }, jsx(HoverCardContent, {
-    onMouseEnter: initShowCard,
-    onMouseLeave: initHideCard,
-    analytics: analytics,
-    cardActions: filteredActions,
-    cardState: linkState,
-    onActionClick: onActionClick,
-    onResolve: update,
-    renderers: renderers,
-    showServerActions: showServerActions,
-    url: url,
-    id: id
-  })) : jsx(HoverCardContent, {
-    onMouseEnter: initShowCard,
-    onMouseLeave: initHideCard,
-    analytics: analytics,
-    cardActions: filteredActions,
-    cardState: linkState,
-    onActionClick: onActionClick,
-    onResolve: update,
-    renderers: renderers,
-    showServerActions: showServerActions,
-    url: url
-  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
+  }) => {
+    const hoverCardContentProps = {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      cardActions: filteredActions,
+      cardState: linkState,
+      onActionClick,
+      onResolve: update,
+      renderers,
+      showServerActions,
+      url,
+      id,
+      ...(getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? {} : {
+        analytics
+      })
+    };
+    return getBooleanFF('platform.linking-platform.smart-card.enable-analytics-context') ? jsx(SmartLinkAnalyticsContext, {
+      url: url,
+      appearance: CardDisplay.HoverCardPreview,
+      id: id,
+      source: HOVER_CARD_SOURCE
+    }, jsx(HoverCardContent, hoverCardContentProps)) : jsx(HoverCardContent, hoverCardContentProps);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
+import { useSmartLinkAnalytics } from '../../../state/analytics';
 import { getExtensionKey } from '../../../state/helpers';
 import { isSpecialEvent } from '../../../utils';
 import { HoverCardContainer, flexibleUiOptions, titleBlockCss } from '../styled';
@@ -17,6 +19,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { useSmartCardActions } from '../../../state/actions';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
+import { useSmartCardState } from '../../../state/store';
 export const hoverCardClassName = 'smart-links-hover-preview';
 export const getOpenAction = (url, analytics, onActionClick) => ({
   name: ActionName.CustomAction,
@@ -50,7 +53,7 @@ export const getCopyAction = url => ({
 });
 const HoverCardContent = ({
   id = '',
-  analytics,
+  analytics: _analytics,
   cardActions = [],
   cardState,
   onActionClick,
@@ -65,11 +68,50 @@ const HoverCardContent = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const defaultAnalytics = useSmartLinkAnalytics(url, undefined, id);
+  const analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const actions = useSmartCardActions(id, url, analytics);
+  const linkState = useSmartCardState(url);
+  const linkStatus = linkState.status;
+  const statusRef = useRef(linkStatus);
+  const analyticsRef = useRef(analytics);
   useEffect(() => {
     actions.loadMetadata();
   }, [actions]);
+  useEffect(() => {
+    /**
+     * Must access current analytics object value via ref because its not stable
+     * and it can trigger useEffect to re-run below
+     */
+    if (analyticsRef.current !== analytics) {
+      analyticsRef.current = analytics;
+    }
+    if (statusRef.current !== linkStatus) {
+      statusRef.current = linkStatus;
+    }
+  }, [analytics, linkStatus]);
+  useEffect(() => {
+    if (getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+      const previewDisplay = 'card';
+      const previewInvokeMethod = 'mouse_hover';
+      const cardOpenTime = Date.now();
+      analyticsRef.current.ui.hoverCardViewedEvent({
+        previewDisplay,
+        previewInvokeMethod,
+        status: statusRef.current
+      });
+      return () => {
+        const hoverTime = Date.now() - cardOpenTime;
+        analyticsRef.current.ui.hoverCardDismissedEvent({
+          previewDisplay,
+          previewInvokeMethod,
+          hoverTime,
+          status: statusRef.current
+        });
+      };
+    }
+  }, []);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({

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

@@ -4,6 +4,7 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useSmartLinkAnalytics } from '../../state/analytics';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { HoverCardComponent } from './components/HoverCardComponent';
@@ -18,7 +19,11 @@ const HoverCardWithErrorBoundary = props => {
   const analyticsHandler = useCallback(analyticsPayload => {
     fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
-  const analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
+
+  /**
+   * Feature flag disables prop drilling of analytics handlers
+   */
+  const analytics = useSmartLinkAnalytics(url, getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? undefined : analyticsHandler, id);
   const onError = useCallback((error, info) => {
     analytics.ui.renderFailedEvent({
       display: CardDisplay.HoverCardPreview,
@@ -27,17 +32,29 @@ const HoverCardWithErrorBoundary = props => {
       errorInfo: info
     });
   }, [analytics.ui, id]);
+
+  /**
+   * Feature flag disables the prop drilling of analytics handlers to hover card component
+   */
+  const analyticsProps = getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics') ? {} : {
+    analyticsHandler,
+    analytics
+  };
   return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, jsx(HoverCardComponent, _extends({}, props, {
-    analyticsHandler: analyticsHandler,
-    analytics: analytics
-  }), children));
+  }, jsx(HoverCardComponent, _extends({}, props, analyticsProps), children));
 };
-export const HoverCard = withAnalyticsContext({
+const HoverCardWithAnalyticsContext = withAnalyticsContext({
   source: 'smartLinkPreviewHoverCard',
   attributes: {
     display: CardDisplay.HoverCardPreview
   }
-})(withAnalyticsEvents()(HoverCardWithErrorBoundary));
+})(withAnalyticsEvents()(HoverCardWithErrorBoundary));
+const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
+export const HoverCard = props => {
+  if (getBooleanFF('platform.linking-platform.smart-card.refactor-hover-card-analytics')) {
+    return jsx(HoverCardWithoutAnalyticsContext, props);
+  }
+  return jsx(HoverCardWithAnalyticsContext, props);
+};

package/dist/es2019/view/InlineCard/Icon.js

@@ -10,7 +10,7 @@ import React from 'react';
 export const Icon = styled.img`
   height: 14px;
   width: 14px;
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   border-radius: 2px;
   user-select: none;
   position: absolute;
@@ -23,7 +23,7 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: -2px;
+  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
 `;
 export const Shimmer = ({
   testId

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export const IconObjectOverrides = `
   & > span {
@@ -49,7 +48,7 @@ export const IconWrapper = styled.span`
 // Wraps all emoji in Inline Links similar to icon
 export const EmojiWrapper = styled.span`
   display: inline-block;
-  margin-right: 2px;
+  margin-right: ${"var(--ds-space-025, 2px)"};
   user-select: none;
   ${IconOverrides}
   ${IconObjectOverrides}
@@ -71,12 +70,12 @@ export const LozengeWrapper = styled.span`
 // TODO: Replace overrides with proper AtlasKit solution.
 export const LozengeBlockWrapper = styled.span`
   & > span {
-    margin-left: 4px;
+    margin-left: ${"var(--ds-space-050, 4px)"};
   }
 `;
 export const RightIconPositionWrapper = styled.span`
-  margin-left: 2px;
-  margin-right: 4px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;
@@ -85,7 +84,7 @@ export const RightIconPositionWrapper = styled.span`
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 export const IconPositionWrapper = styled.span`
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;

package/dist/es2019/view/InlineCard/ResolvingView/styled.js

@@ -2,5 +2,5 @@ import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
 export const SpinnerWrapper = styled(IconTitleWrapper)`
   vertical-align: text-top;
-  margin-left: 2px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
 `;

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

@@ -11,7 +11,8 @@ export var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref)
   var children = _ref.children,
     url = _ref.url,
     appearance = _ref.appearance,
-    id = _ref.id;
+    id = _ref.id,
+    source = _ref.source;
   var _useSmartLinkState = useSmartLinkState(url),
     details = _useSmartLinkState.details,
     status = _useSmartLinkState.status;
@@ -26,6 +27,7 @@ export var SmartLinkAnalyticsContext = function SmartLinkAnalyticsContext(_ref)
   var display = isFlexibleUi ? CardDisplay.Flexible : appearance;
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: {
+      source: source,
       attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
         urlHash: urlHash,
         display: display,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.3.2",
+	"version": "26.3.4",
 	"sideEffects": false
 }

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

@@ -27,7 +27,7 @@ import { handleClickCommon } from './utils/handlers';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
-var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
+var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,

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

@@ -58,6 +58,8 @@ function visible(_ref6) {
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
 });
@@ -101,15 +103,17 @@ export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTem
   return csssize(size);
 }, borderRadius);
 export var maxAvatarCount = 6;
-export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
-export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
-export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
+export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {
   var src = _ref13.src;
   return src;
 });
-export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));
-export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: right;\n\n  > * {\n    margin-top: ", ";\n  }\n\n  > * + * {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
 export var AlertWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 var height = '20px';
 export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
-export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -6,6 +6,8 @@ import { getTruncateStyles } from '../../../utils';
 export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
 var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 export var textStyles = function textStyles(maxLines) {
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
-export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
-export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
+export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
+export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

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

@@ -11,7 +11,7 @@ import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
 import { HoverCard } from '../../../HoverCard';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
-var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
+var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var getGap = function getGap(size) {
   switch (size) {
     case SmartLinkSize.XLarge: