@atlaskit/smart-card 26.69.0 → 26.70.0

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule/main.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ButtonItem } from '@atlaskit/menu';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { useAutomationMenu } from '../../menu-context';
+const ruleButtonStyle = xcss({
+  borderColor: 'color.border',
+  borderStyle: 'solid',
+  borderWidth: 'border.width',
+  borderRadius: 'border.radius'
+});
+const selectedRuleButtonStyle = xcss({
+  backgroundColor: 'color.background.accent.blue.subtlest',
+  borderColor: 'color.border.accent.blue',
+  borderStyle: 'solid',
+  borderWidth: 'border.width.outline',
+  borderRadius: 'border.radius'
+});
+const ruleNameStyle = xcss({
+  // Using this to increase the height of the button itself.
+  height: '28px'
+});
+export const AutomationModalRule = ({
+  rule,
+  selectedRule,
+  setSelectedRule
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const {
+    analyticsSource,
+    invokingRuleId
+  } = useAutomationMenu();
+  const isSelectedRule = (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id) === rule.id;
+  const isExecuting = rule.id === invokingRuleId;
+  const ruleOnClick = () => {
+    createAnalyticsEvent({
+      type: 'sendUIEvent',
+      data: {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'selectManualTriggerAutomation',
+        source: analyticsSource,
+        attributes: {
+          ruleId: rule.id.toString()
+        }
+      }
+    }).fire();
+    setSelectedRule(rule);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: isSelectedRule ? selectedRuleButtonStyle : ruleButtonStyle
+  }, /*#__PURE__*/React.createElement(ButtonItem, {
+    isDisabled: !!invokingRuleId,
+    iconBefore: isExecuting ? /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    }) : null,
+    onClick: ruleOnClick
+  }, /*#__PURE__*/React.createElement(Stack, {
+    xcss: ruleNameStyle,
+    alignBlock: "center"
+  }, rule.name)));
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/index.js

@@ -0,0 +1,2 @@
+import { AutomationModalRuleList } from './main';
+export { AutomationModalRuleList };

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/main.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MenuGroup } from '@atlaskit/menu';
+import { Stack } from '@atlaskit/primitives';
+import { useAutomationMenu } from '../../menu-context';
+import { AutomationModalEmptyState } from '../empty-state';
+import { AutomationModalRule } from '../rule';
+export const AutomationModalRuleList = ({
+  selectedRule,
+  setSelectedRule
+}) => {
+  const {
+    rules
+  } = useAutomationMenu();
+  if (rules.length === 0) {
+    return /*#__PURE__*/React.createElement(AutomationModalEmptyState, null);
+  }
+  return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, rules.map(rule => /*#__PURE__*/React.createElement(AutomationModalRule, {
+    key: `manual-rule-${rule.id}`,
+    rule: rule,
+    selectedRule: selectedRule,
+    setSelectedRule: setSelectedRule
+  }))));
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './main';

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/skeleton/main.js

@@ -0,0 +1,79 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { keyframes, css } from '@emotion/react';
+import { N20, N30 } from '@atlaskit/theme/colors';
+const AutomationSkeletonContainer = css({
+  paddingBlock: "var(--ds-space-025, 2px)"
+});
+const SkeletonContainer = css({
+  marginBlock: "var(--ds-space-100, 8px)",
+  marginInline: "var(--ds-space-250, 20px)",
+  display: 'flex'
+});
+const SkeletonIcon = css({
+  width: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-200, 16px)",
+  display: 'inline-block',
+  borderRadius: "var(--ds-space-025, 2px)",
+  backgroundColor: 'currentColor',
+  border: `${"var(--ds-space-025, 2px)"} solid transparent`,
+  opacity: 0.15
+});
+const MenuIcon = css({
+  width: '24px',
+  height: '24px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '2000px 0'
+  }
+});
+const SkeletonText = css({
+  width: '85%',
+  height: "var(--ds-space-200, 16px)",
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-150, 12px)",
+  animationDuration: '1s',
+  animationFillMode: 'forwards',
+  animationIterationCount: 'infinite',
+  animationName: shimmer,
+  animationTimingFunction: 'linear',
+  backgroundColor: `var(--ds-skeleton, ${N30})`,
+  backgroundImage: `linear-gradient(to right, ${`var(--ds-skeleton, ${N30})`} 10%, ${`var(--ds-skeleton-subtle, ${N20})`} 30%, ${`var(--ds-skeleton, ${N30})`} 50%)`,
+  backgroundRepeat: 'no-repeat'
+});
+const SkeletonLine = () => jsx("div", {
+  css: SkeletonContainer
+}, jsx("div", {
+  css: MenuIcon
+}, jsx("div", {
+  css: SkeletonIcon
+})), jsx("div", {
+  css: SkeletonText
+}));
+const getSkeletonLines = lineCount => {
+  const skeletonLines = [];
+  for (let i = 0; i < lineCount; i++) {
+    skeletonLines.push(jsx(SkeletonLine, {
+      key: `skeleton-line-${i}`
+    }));
+  }
+  return skeletonLines;
+};
+export const Skeleton = props => {
+  const {
+    lineCount = 5
+  } = props;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives
+    jsx("div", {
+      css: AutomationSkeletonContainer
+    }, getSkeletonLines(lineCount))
+  );
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/index.js

@@ -1,33 +1,56 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AutomationManualTriggersGlyph from './manaul-triggers-icon';
 import Action from '../action';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-// import { useSmartLinkContext } from '../../../../../../../link-provider/src';
-
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+const AutomationModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
 const handleAutomateActionClick = setIsModalOpen => {
   setIsModalOpen(true);
 };
+const handleAutomationActionClose = setIsModalOpen => {
+  setIsModalOpen(false);
+};
 const AutomationAction = props => {
-  var _context$actions;
-  const [_isModalOpen, setIsModalOpen] = useState(false);
+  var _ref, _context$actions;
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     formatMessage
   } = useIntl();
-  // const { connections } = useSmartLinkContext();
-
-  // const env = connections.client.envKey ?? 'prod';
+  const smartLinkContext = useSmartLinkContext();
+  const {
+    connections
+  } = smartLinkContext;
+  const environment = (_ref = connections.client.envKey) !== null && _ref !== void 0 ? _ref : 'prod';
   const context = useFlexibleUiContext();
-  const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
-  if (!data) {
+  const automationActionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
+  if (!automationActionData) {
     return null;
   }
+  const {
+    baseAutomationUrl,
+    objectName,
+    objectAri,
+    siteAri,
+    canManageAutomation,
+    analyticsSource,
+    modalTitle,
+    modalDescription
+  } = automationActionData;
   const automationActionTitle = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_title);
   const automationActionTooltip = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_tooltip);
   const automationActionIconLabel = formatMessage(messages.automation_action_icon_label);
+  const automationModalTitle = /*#__PURE__*/React.createElement(FormattedMessage, modalTitle);
+  const automationModalDescription = /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalDescription, {
+    values: {
+      name: objectName,
+      b: chunks => /*#__PURE__*/React.createElement("strong", null, chunks),
+      br: /*#__PURE__*/React.createElement("br", null)
+    }
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({
     content: automationActionTitle,
     icon: /*#__PURE__*/React.createElement(AutomationManualTriggersGlyph, {
@@ -35,8 +58,23 @@ const AutomationAction = props => {
     }),
     testId: "smart-action-automation-action",
     tooltipMessage: automationActionTooltip
-  }, data, props, {
+  }, automationActionData, props, {
     onClick: () => handleAutomateActionClick(setIsModalOpen)
+  })), isModalOpen &&
+  /*#__PURE__*/
+  // TODO skeleton modal fallback
+  React.createElement(Suspense, {
+    fallback: false
+  }, /*#__PURE__*/React.createElement(AutomationModal, {
+    environment: environment,
+    baseAutomationUrl: baseAutomationUrl,
+    objectAri: objectAri,
+    siteAri: siteAri,
+    canManageAutomation: canManageAutomation,
+    analyticsSource: analyticsSource,
+    modalTitle: automationModalTitle,
+    modalDescription: automationModalDescription,
+    onClose: () => handleAutomationActionClose(setIsModalOpen)
   })));
 };
 export default AutomationAction;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { Box, xcss } from '@atlaskit/primitives';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)({
   borderRadius: "var(--ds-border-radius, 3px)",
   backgroundColor: "var(--ds-surface-raised, white)",

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

@@ -90,11 +90,15 @@ const baseWrapperStyles = props => ({
 
   ...(props.isHovered ? hoveredWihBorderStyles(props) : undefined)
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const WrapperAnchor = styled.a(props => ({
   ...baseWrapperStyles(props),
   ...isInteractive(props)
 }));
 WrapperAnchor.displayName = 'WrapperAnchor';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const WrapperSpan = styled.span(props => ({
   ...baseWrapperStyles(props)
 }));

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

@@ -7,6 +7,7 @@ import React from 'react';
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const Icon = styled.img({
   height: '14px',
   width: '14px',
@@ -22,6 +23,7 @@ export const Icon = styled.img({
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const AKIconWrapper = styled.span({
   marginRight: "var(--ds-space-negative-025, -2px)"
 });

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

@@ -39,11 +39,13 @@ export const IconOverrides = `
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const IconWrapper = styled.span({
   userSelect: 'none'
 }, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const EmojiWrapper = styled.span({
   display: 'inline-block',
   marginRight: "var(--ds-space-025, 2px)",
@@ -53,6 +55,7 @@ export const EmojiWrapper = styled.span({
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const IconTitleWrapper = styled.span({
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-all',
@@ -61,11 +64,14 @@ export const IconTitleWrapper = styled.span({
 });
 
 // TODO: Replace overrides with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const LozengeWrapper = styled.span({
   display: 'inline-block',
   verticalAlign: '1px',
   margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const RightIconPositionWrapper = styled.span({
   marginLeft: "var(--ds-space-025, 2px)",
   position: 'relative',
@@ -75,11 +81,14 @@ export const RightIconPositionWrapper = styled.span({
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const IconPositionWrapper = styled.span({
   marginRight: "var(--ds-space-050, 4px)",
   position: 'relative',
   display: 'inline-block'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const IconEmptyWrapper = styled.span({
   width: '14px',
   height: '100%',
@@ -90,4 +99,6 @@ export const IconEmptyWrapper = styled.span({
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
 export const TitleWrapperClassName = 'smart-link-title-wrapper';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const TitleWrapper = styled.span({});

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

@@ -29,9 +29,9 @@ export class InlineCardResolvingView extends React.Component {
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         onClick: onClick,
-        isSelected: isSelected
+        isSelected: isSelected,
+        link: url
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        link: url,
         title: url,
         titleTextColor: titleTextColor
       }, /*#__PURE__*/React.createElement(SpinnerWrapper, {

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

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const SpinnerWrapper = styled(IconTitleWrapper)({
   verticalAlign: 'text-bottom',
   padding: '0px'

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

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const IconStyledButton = styled.span({
   '&&&': {
     textAlign: 'initial',
@@ -26,13 +27,19 @@ export const IconStyledButton = styled.span({
     }
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const NoLinkAppearance = styled.span({
   color: `var(--ds-text-subtlest, ${N200})`,
   marginLeft: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const LowercaseAppearance = styled.span({
   textTransform: 'lowercase'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const LinkAppearance = styled.a({
   color: `var(--ds-link, ${B400})`,
   '&:hover': {

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.69.0",
+  packageVersion: "26.70.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { messages } from '../../../messages';
+const RelatedLinksModal = ({
+  onClose,
+  showModal,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(ModalTransition, null, showModal && /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_title_nonfinal))), /*#__PURE__*/React.createElement(ModalBody, null, children), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.close)))));
+};
+export default RelatedLinksModal;

package/dist/es2019/view/RelatedLinksModal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/extractors/flexible/actions/extract-automation-action.js

@@ -24,7 +24,7 @@ var getProductData = function getProductData(meta) {
   return ProductData === null || ProductData === void 0 || (_ProductData$product = ProductData[product]) === null || _ProductData$product === void 0 ? void 0 : _ProductData$product[resourceType];
 };
 export var extractAutomationAction = function extractAutomationAction(response) {
-  if (!getBooleanFF('platform.linking-platfom.smart-card.confluence.page.automation-action') || !response.data) {
+  if (!getBooleanFF('platform.linking-platfom.smart-card.confluence.page.automation-action_xcdoi') || !response.data) {
     return undefined;
   }
   var data = response.data;

package/dist/esm/messages.js

@@ -67,7 +67,7 @@ export var messages = defineMessages({
   },
   automation_action_title: {
     id: 'fabric.linking.automation-action.title',
-    defaultMessage: 'Run automation...',
+    defaultMessage: 'View automation rules...',
     description: 'The title of the button in a hover card to open an automation menu for a given SmartLink.'
   },
   automation_action_icon_label: {
@@ -77,7 +77,7 @@ export var messages = defineMessages({
   },
   automation_action_tooltip: {
     id: 'fabric.linking.automation-action.tooltip',
-    defaultMessage: 'Open an automation modal',
+    defaultMessage: 'Select an automation rule to run',
     description: 'The tooltip for the automation action indicating that a button will open an automation modal.'
   },
   automation_action_confluence_page_modal_title: {
@@ -699,5 +699,10 @@ export var messages = defineMessages({
     id: 'fabric.linking.generic_error_message',
     defaultMessage: 'An error occurred',
     description: 'A generic error message to the user'
+  },
+  related_links_modal_title_nonfinal: {
+    id: 'fabric.linking.related_links_modal_title.nonfinal',
+    defaultMessage: 'Recent Links',
+    description: 'Shown as the title for the related links modal'
   }
 });

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

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 // TODO: Replace overrides with proper AtlasKit solution.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var LozengeBlockWrapper = styled.span({
   '& > span': {
     marginLeft: "var(--ds-space-050, 4px)"

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

@@ -66,10 +66,12 @@ function visible(_ref7) {
   return frameStyle === 'show' ? visibleStyles : '';
 }
 
-// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 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/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Wrapper = styled.div(function (props) {
   return wrapperStyles(props);
 }, {
@@ -79,6 +81,7 @@ export var Wrapper = styled.div(function (props) {
   marginTop: '10px'
 });
 export var embedHeaderHeight = 32;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Header = styled.div({
   height: "".concat(embedHeaderHeight, "px"),
   position: 'absolute',
@@ -93,6 +96,7 @@ export var Header = styled.div({
   var frameStyle = _ref8.frameStyle;
   return frameStyle === 'show' ? "\n        box-sizing: border-box;\n        padding: 0 ".concat("var(--ds-space-100, 8px)", ";\n      ") : '';
 });
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var IconWrapper = styled.div(borderRadius, csssize(16), function (_ref9) {
   var isPlaceholder = _ref9.isPlaceholder;
   if (isPlaceholder) {
@@ -103,6 +107,8 @@ export var IconWrapper = styled.div(borderRadius, csssize(16), function (_ref9)
 }, {
   marginRight: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var TextWrapper = styled.div(function (_ref10) {
   var isPlaceholder = _ref10.isPlaceholder;
   if (isPlaceholder) {
@@ -115,13 +121,15 @@ export var TextWrapper = styled.div(function (_ref10) {
   fontSize: '12px',
   lineHeight: '16px'
 }, ellipsis('none'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var TooltipWrapper = styled.div({
   overflow: 'hidden'
 });
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
   var allowScrollBar = _ref11.allowScrollBar,
     removeOverflow = _ref11.removeOverflow;
@@ -136,6 +144,7 @@ export var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedT
   var frameStyle = _ref13.frameStyle;
   return frameStyle === 'hide' ? 'height: 100%;' : "\n        height: calc(100% - ".concat("var(--ds-space-400, 32px)", ");\n        top: ", "var(--ds-space-400, 32px)", ";\n      ");
 });
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Image = styled.img(function (_ref14) {
   var size = _ref14.size;
   return csssize(size);
@@ -143,12 +152,16 @@ export var Image = styled.img(function (_ref14) {
   overflow: 'hidden'
 });
 export var maxAvatarCount = 6;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var ContentWrapper = styled.div({
   display: 'flex',
   flexDirection: 'row',
   boxSizing: 'border-box',
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Title = styled.div({
   color: "var(--ds-text, ".concat(colors.N900, ")"),
   fontSize: '16px',
@@ -157,6 +170,8 @@ export var Title = styled.div({
   maxHeight: "".concat(20 * 4, "px"),
   overflow: 'hidden'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Byline = styled.div({
   marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
@@ -164,6 +179,8 @@ export var Byline = styled.div({
   fontWeight: 'normal',
   lineHeight: 16 / 12
 }, ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Description = styled.div({
   marginTop: "calc(".concat("var(--ds-space-100, 8px)", " - 1px)"),
   color: "var(--ds-text, ".concat(colors.N800, ")"),
@@ -173,9 +190,12 @@ export var Description = styled.div({
   maxHeight: "".concat(18 * 3, "px"),
   overflow: 'hidden'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var ResolvedViewIconWrapper = styled.div({
   marginTop: "var(--ds-space-050, 4px)"
 });
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var Thumbnail = styled.div(borderRadius, csssize(48), function (props) {
   return {
     float: 'right',
@@ -185,9 +205,13 @@ export var Thumbnail = styled.div(borderRadius, csssize(48), function (props) {
     backgroundSize: 'cover'
   };
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var UsersWrapper = styled.div({
   marginTop: "var(--ds-space-100, 8px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var ActionsWrapper = styled.div({
   marginTop: "var(--ds-space-100, 8px)",
   textAlign: 'right',
@@ -198,6 +222,8 @@ export var ActionsWrapper = styled.div({
     marginLeft: "var(--ds-space-050, 4px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export var AlertWrapper = styled.div({
   position: 'absolute',
   top: 0,