@atlaskit/smart-card 27.5.4 → 27.6.1

package/dist/es2019/view/BlockCard/components/Thumbnail.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const Thumbnail = props => {
   return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);
@@ -15,6 +16,7 @@ export const ThumbnailDefault = ({
   testId
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedStyles,
       backgroundSize: 'cover',
@@ -26,12 +28,17 @@ export const ThumbnailDefault = ({
     "data-trello-do-not-use-override": testId
   });
 };
+const thumbnailImgStyles = css({
+  height: '90px',
+  width: '90px'
+});
 export const ThumbnailWithBackground = ({
   src,
   color,
   testId
 }) => {
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: mq({
       ...sharedStyles,
       backgroundColor: color,
@@ -43,9 +50,6 @@ export const ThumbnailWithBackground = ({
     "data-trello-do-not-use-override": testId
   }, jsx("img", {
     src: src,
-    css: {
-      height: '90px',
-      width: '90px'
-    }
+    css: thumbnailImgStyles
   }));
 };

package/dist/es2019/view/BlockCard/components/UnresolvedText.js

@@ -1,13 +1,15 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+const styles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
 export const UnresolvedText = ({
   icon,
   text
 }) => {
   return jsx("span", {
-    css: {
-      display: 'flex',
-      alignItems: 'center'
-    }
+    css: styles
   }, icon, text);
 };

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

@@ -20,6 +20,7 @@ import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView'
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import FlexibleErroredView from './views/flexible/FlexibleErroredView';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 export { default as PreviewAction } from './actions/PreviewAction';

package/dist/es2019/view/BlockCard/views/ErroredView.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useMemo } from 'react';

package/dist/es2019/view/BlockCard/views/ForbiddenView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';

package/dist/es2019/view/BlockCard/views/NotFoundView.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { Frame } from '../components/Frame';
@@ -88,6 +89,7 @@ export const ResolvedView = ({
     textColor: titleTextColor
   }), lozenge && jsx(LozengeBlockWrapper, {
     css: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       height: gs(2.5),
       display: 'flex',
       alignItems: 'center',

package/dist/es2019/view/BlockCard/views/ResolvingView.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
@@ -14,6 +15,12 @@ import { gs } from '../../common/utils';
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export const blockCardResolvingViewClassName = 'block-card-resolving-view';
+const messageStyles = css({
+  fontSize: `${fontSize()}px`,
+  color: `var(--ds-text-subtlest, ${N90})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginLeft: gs(0.5)
+});
 export const ResolvingView = ({
   isSelected = false,
   testId = 'block-card-resolving-view',
@@ -31,10 +38,5 @@ export const ResolvingView = ({
   primaryColor: `var(--ds-icon-subtle, ${N50})`,
   label: "document-icon"
 }), jsx("span", {
-  css: {
-    fontSize: `${fontSize()}px`,
-    color: `var(--ds-text-subtlest, ${N90})`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    marginLeft: gs(0.5)
-  }
+  css: messageStyles
 }, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/BlockCard/views/UnauthorizedView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';

package/dist/es2019/view/BlockCard/views/flexible/styled.js

@@ -1,34 +1,48 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 // renderer overwrites the margin-right so we need to add it here
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const metadataBlockCss = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span[data-smart-element-avatar-group]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> ul': {
       paddingLeft: '0px',
       marginRight: "var(--ds-space-100, 0.5rem)"
     }
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '[data-smart-element-group]': {
     lineHeight: '1rem'
   }
 });
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const titleBlockCss = css({
   gap: "var(--ds-space-100, 0.5em)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   "[data-smart-element='Title']": {
     fontWeight: 600
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const footerBlockCss = css({
   height: '1.5rem',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.actions-button-group': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     'button, button:hover, button:focus, button:active': {
       fontSize: '0.875rem'
     }
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const flexibleBlockCardStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > div': {
     borderRadius: "var(--ds-border-radius-200, 8px)",
     border: `1px solid ${`var(--ds-border, ${N40})`}`

package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 import FlexibleCard from '../../../../FlexibleCard';
 import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
 import { FlexibleCardUiOptions, PreviewBlockOptions, titleBlockOptions, FooterBlockOptions } from '../utils';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 const customBlockStyles = css({
   alignItems: 'flex-start'

package/dist/es2019/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.js

@@ -1,8 +1,12 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { flexibleBlockCardStyle } from '../styled';
 export const withFlexibleUIBlockCardStyle = FlexibleBlockCardView => props => {
-  return jsx("div", {
-    css: flexibleBlockCardStyle
-  }, jsx(FlexibleBlockCardView, props));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: flexibleBlockCardStyle
+    }, jsx(FlexibleBlockCardView, props))
+  );
 };

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

@@ -1,7 +1,9 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const LozengeBlockWrapper = styled.span({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > span': {
     marginLeft: "var(--ds-space-050, 4px)"
   }

package/dist/es2019/view/EmbedCard/components/Frame.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { di } from 'react-magnetic-di';
 import { getIframeSandboxAttribute } from '../../../utils';
@@ -16,6 +17,16 @@ function mergeRefs(refs) {
     });
   };
 }
+const iframeStyles = css({
+  border: 0,
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  overflow: 'hidden',
+  borderRadius: '3px'
+});
 export const Frame = /*#__PURE__*/React.forwardRef(({
   url,
   isTrusted = false,
@@ -83,16 +94,7 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
     src: url,
     "data-testid": `${testId}-frame`,
     "data-iframe-loaded": isIframeLoaded,
-    css: {
-      border: 0,
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      position: 'relative',
-      overflow: 'hidden',
-      borderRadius: '3px'
-    },
+    css: iframeStyles,
     onMouseEnter: () => setMouseOver(true),
     onMouseLeave: () => setMouseOver(false),
     allowFullScreen: true,

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -136,14 +137,14 @@ function visible({
   return frameStyle === 'show' ? visibleStyles : '';
 }
 
-// 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
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const LinkWrapper = styled.div`
 	${props => wrapperStyles(props)} &:hover {
 		text-decoration: none;
 	}
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const Wrapper = styled.div(props => wrapperStyles(props), {
   // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
   // to be thoroughly checked with a designer so that we do not miss an unintended visual change
@@ -151,7 +152,7 @@ export const Wrapper = styled.div(props => wrapperStyles(props), {
   marginTop: '10px'
 });
 export const embedHeaderHeight = 32;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Header = styled.div({
   height: `${embedHeaderHeight}px`,
   position: 'absolute',
@@ -159,21 +160,31 @@ export const Header = styled.div({
   width: '100%',
   display: 'flex',
   alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-icon, ${colors.N300})`,
   opacity: 0,
   transition: '300ms opacity cubic-bezier(0.15, 1, 0.3, 1)'
-}, ({
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
   frameStyle
 }) => frameStyle === 'show' ? `
         box-sizing: border-box;
         padding: 0 ${"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 const IconWrapper = styled.div(borderRadius, csssize(16), ({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const IconWrapper = styled.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+borderRadius,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+csssize(16),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
   isPlaceholder
 }) => {
   if (isPlaceholder) {
     return `
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       background-color: ${`var(--ds-skeleton, ${colors.N30})`};
     `;
   } else {
@@ -183,8 +194,10 @@ export const IconWrapper = styled.div(borderRadius, csssize(16), ({
   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 const TextWrapper = styled.div(({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const TextWrapper = styled.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+({
   isPlaceholder
 }) => {
   if (isPlaceholder) {
@@ -192,25 +205,29 @@ export const TextWrapper = styled.div(({
         ${borderRadius}
         width: 125px;
         height: 12px;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         background-color: ${`var(--ds-skeleton, ${colors.N30})`};
       `;
   } else {
     return '';
   }
 }, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtlest, ${colors.N300})`,
   fontSize: '12px',
   lineHeight: '16px'
-}, ellipsis('none'));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('none'));
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const 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, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Content = styled.div`
 	${contentBorderRadius};
 	border: 1px solid ${`var(--ds-border, ${N40})`};
@@ -255,7 +272,7 @@ export const Content = styled.div`
         top: ${"var(--ds-space-400, 32px)"};
       `}
 `;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export const Image = styled.img(({
   size
 }) => csssize(size), borderRadius, {
@@ -263,7 +280,7 @@ export const Image = styled.img(({
 });
 export const maxAvatarCount = 6;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ContentWrapper = styled.div({
   display: 'flex',
   flexDirection: 'row',
@@ -271,8 +288,9 @@ export const ContentWrapper = styled.div({
   padding: `${"var(--ds-space-100, 8px)"} ${"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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Title = styled.div({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${colors.N900})`,
   fontSize: '16px',
   fontWeight: 500,
@@ -281,18 +299,22 @@ export const Title = styled.div({
   overflow: 'hidden'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Byline = styled.div({
   marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtlest, ${colors.N300})`,
   fontSize: '12px',
   fontWeight: 'normal',
   lineHeight: 16 / 12
-}, ellipsis('100%'));
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('100%'));
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const Description = styled.div({
   marginTop: `calc(${"var(--ds-space-100, 8px)"} - 1px)`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${colors.N800})`,
   fontSize: '12px',
   fontWeight: 'normal',
@@ -301,37 +323,41 @@ export const Description = styled.div({
   overflow: 'hidden'
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const 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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const Thumbnail = styled.div(borderRadius, csssize(48), props => ({
   float: 'right',
   margin: `${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: `var(--ds-skeleton, ${colors.N30})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundImage: `url(${props.src})`,
   backgroundSize: 'cover'
 }));
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const 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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const ActionsWrapper = styled.div({
   marginTop: "var(--ds-space-100, 8px)",
   textAlign: 'right',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     marginTop: "var(--ds-space-050, 4px)"
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> * + *': {
     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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const AlertWrapper = styled.div({
   position: 'absolute',
   top: 0,

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';
@@ -8,6 +9,21 @@ import { Frame } from '../../BlockCard/components/Frame';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { gs } from '../../common/utils';
+const messageStyles = css({
+  fontSize: `${fontSize()}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginLeft: gs(0.5),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginRight: gs(0.5),
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // Fallback options.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxHeight: gs(3)
+});
 export const EmbedCardErroredView = ({
   onRetry,
   isSelected = false,
@@ -23,20 +39,7 @@ export const EmbedCardErroredView = ({
   primaryColor: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
 }), jsx("span", {
-  css: {
-    fontSize: `${fontSize()}px`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    marginLeft: gs(0.5),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    marginRight: gs(0.5),
-    display: '-webkit-box',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    WebkitLineClamp: 1,
-    WebkitBoxOrient: 'vertical',
-    // Fallback options.
-    maxHeight: gs(3)
-  }
+  css: messageStyles
 }, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
   testId: "err-view-retry",
   appearance: "link",

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/glyph/link';

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import LinkGlyph from '@atlaskit/icon/glyph/link';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { ExpandedFrame } from '../../components/ExpandedFrame';

package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,9 +1,14 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const containerStyles = css({
   display: 'grid',
   height: 'inherit'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const contentStyles = css({
   display: 'flex',
   flexDirection: 'column',
@@ -12,19 +17,26 @@ export const contentStyles = css({
   margin: 'auto',
   padding: "var(--ds-space-200, 16px)",
   gap: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxWidth: gs(50)
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const imageStyles = css({
   height: '120px',
   width: '180px',
   objectFit: 'contain',
   objectPosition: 'center center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const titleStyles = css({
   textAlign: 'center',
   margin: 0,
   padding: 0
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const descriptionStyles = css({
   fontSize: '1em',
   textAlign: 'center'

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { di } from 'react-magnetic-di';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';