@atlaskit/editor-common 82.2.2 → 82.4.0

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -25,16 +25,20 @@ import EmptyState from './EmptyState';
 import { getColumnCount, getScrollbarWidth } from './utils';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const itemIcon = css({
   width: `${ICON_WIDTH}px`,
   height: `${ICON_HEIGHT}px`,
   overflow: 'hidden',
   border: `1px solid ${"var(--ds-border, rgba(223, 225, 229, 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
   borderRadius: `${borderRadius()}px`,
   boxSizing: 'border-box',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   div: {
     width: `${ICON_WIDTH}px`,
     height: `${ICON_HEIGHT}px`
@@ -164,8 +168,11 @@ function ElementList({
       columnIndex: columnIndex,
       parent: parent
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: style,
-      key: key,
+      key: key
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
+      ,
       className: "element-item-wrapper",
       css: elementItemWrapper,
       onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? e => {
@@ -366,21 +373,28 @@ const elementItemsWrapper = css({
   justifyContent: 'flex-start',
   overflow: 'hidden',
   padding: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.ReactVirtualized__Collection, .ReactVirtualized__Grid': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderRadius: '3px',
     outline: 'none',
     '&:focus': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
     }
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.ReactVirtualized__Collection__innerScrollContainer, .ReactVirtualized__Grid__innerScrollContainer': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     "div[class='element-item-wrapper']:last-child": {
       paddingBottom: "var(--ds-space-050, 4px)"
     }
   }
 });
 const elementItemWrapper = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   div: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     button: {
       minHeight: '75px',
       alignItems: 'flex-start',
@@ -407,8 +421,11 @@ const multilineStyle = css({
   WebkitLineClamp: 2,
   WebkitBoxOrient: 'vertical'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const itemDescription = css(multilineStyle, {
   overflow: 'hidden',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(11.67),
   color: `var(--ds-text-subtle, ${N200})`,
   marginTop: "var(--ds-space-025, 2px)"
@@ -433,6 +450,7 @@ const itemAfter = css({
   marginBottom: "var(--ds-space-negative-025, -2px)"
 });
 const itemIconStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   img: {
     height: '40px',
     width: '40px',

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -74,67 +74,79 @@ function ElementSearch({
   const assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
   const isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
   const ariaActiveDescendant = isInputNotFocusedAndItemSelected ? `searched-item-${selectedItemIndex}` : undefined;
-  return jsx("div", {
-    css: [wrapper, mode === Modes.inline && wrapperInline]
-  }, jsx(Textfield, {
-    ref: ref,
-    onChange: onChange,
-    onClick: onClick,
-    onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur,
-    elemBeforeInput: jsx("div", {
-      css: elementBeforeInput,
-      "data-testid": "element_search__element_before_input",
-      "aria-hidden": "true"
-    }, jsx(SearchIcon, {
-      size: "medium",
-      label: "Advanced search",
-      primaryColor: "inherit"
-    })),
-    elemAfterInput: jsx("div", {
-      css: elementAfterInput,
-      "data-testid": "element_search__element_after_input"
-    }, jsx("div", {
-      css: styledShortcut
-    }, "\u23CE ", formatMessage(commonMessages.elementAfterInputMessage))),
-    placeholder: formatMessage(commonMessages.placeHolderMessage),
-    "aria-label": "search",
-    "aria-labelledby": "search-assistive"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "js-search-input",
-    role: "combobox",
-    "aria-activedescendant": ariaActiveDescendant,
-    value: searchTerm
-  }), jsx("span", {
-    id: "search-assistive",
-    ref: assistiveTextRef,
-    "aria-live": "polite",
-    "aria-atomic": "true"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "assistive"
-  }, assistiveMessage));
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: [wrapper, mode === Modes.inline && wrapperInline]
+    }, jsx(Textfield, {
+      ref: ref,
+      onChange: onChange,
+      onClick: onClick,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      onBlur: onBlur,
+      elemBeforeInput: jsx("div", {
+        css: elementBeforeInput,
+        "data-testid": "element_search__element_before_input",
+        "aria-hidden": "true"
+      }, jsx(SearchIcon, {
+        size: "medium",
+        label: "Advanced search",
+        primaryColor: "inherit"
+      })),
+      elemAfterInput: jsx("div", {
+        css: elementAfterInput,
+        "data-testid": "element_search__element_after_input"
+      }, jsx("div", {
+        css: styledShortcut
+      }, "\u23CE ", formatMessage(commonMessages.elementAfterInputMessage))),
+      placeholder: formatMessage(commonMessages.placeHolderMessage),
+      "aria-label": "search",
+      "aria-labelledby": "search-assistive"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "js-search-input",
+      role: "combobox",
+      "aria-activedescendant": ariaActiveDescendant,
+      value: searchTerm
+    }), jsx("span", {
+      id: "search-assistive",
+      ref: assistiveTextRef,
+      "aria-live": "polite",
+      "aria-atomic": "true"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "assistive"
+    }, assistiveMessage))
+  );
 }
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const styledShortcut = css(shortcutStyle, {
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
   width: "var(--ds-space-600, 48px)"
 });
 const wrapper = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > [data-ds--text-field--container]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${GRID_SIZE * 6}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
     borderRadius: `${GRID_SIZE}px`,
     flex: '1 1 100%',
     overflow: 'visible',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '& > [data-ds--text-field--input]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       fontSize: relativeFontSizeToBase16(14),
       padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"} 0`
     }
   }
 });
 const wrapperInline = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > [data-ds--text-field--container]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${GRID_SIZE * 5}px`,
     flex: 'none',
     overflow: 'revert'
@@ -143,6 +155,7 @@ const wrapperInline = css({
 const elementBeforeInput = css({
   margin: `1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"}`,
   color: `var(--ds-icon, ${N200})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span, svg': {
     height: '20px',
     width: '20px'
@@ -150,6 +163,7 @@ const elementBeforeInput = css({
 });
 const elementAfterInput = css({
   margin: `0 ${"var(--ds-space-100, 8px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: SEARCH_ITEM_HEIGHT_WIDTH,
   textAlign: 'center'
 });

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -23,9 +23,13 @@ const baseBrowserContainerStyles = css({
   height: '100%',
   minHeight: '-webkit-fill-available'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
   flexDirection: 'column'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const elementBrowserContainer = css(baseBrowserContainerStyles, {
   flexDirection: 'row'
 });
@@ -35,20 +39,28 @@ const baseSidebarStyles = css({
   overflowX: 'auto',
   overflowY: 'hidden'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const mobileSideBar = css(baseSidebarStyles, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   flex: `0 0 ${INLINE_SIDEBAR_HEIGHT}`,
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-150, 12px)"}`
 });
 const mobileSideBarShowCategories = css({
   flex: '0 0 auto'
 });
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const sideBar = css(baseSidebarStyles, {
   flex: "0 0 'auto'"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const sideBarShowCategories = css(baseSidebarStyles, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   flex: `0 0 ${SIDEBAR_WIDTH}`
 });
 const sidebarHeading = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   flex: `0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT}`,
   display: 'inline-flex',
   alignItems: 'center',
@@ -62,6 +74,8 @@ const mobileMainContent = css({
   overflowY: 'auto',
   height: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const mainContent = css(mobileMainContent, {
   marginLeft: "var(--ds-space-200, 16px)",
   height: 'auto'
@@ -73,14 +87,18 @@ const mobileCategoryListWrapper = css({
   display: 'flex',
   overflowX: 'auto',
   padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   minHeight: `${GRID_SIZE * 4}px`,
   overflow: '-moz-scrollbars-none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&::-webkit-scrollbar': {
     display: 'none'
   },
   scrollbarWidth: 'none',
   MsOverflowStyle: 'none'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const categoryListWrapper = css(mobileCategoryListWrapper, {
   padding: 0,
   marginTop: "var(--ds-space-200, 24px)",

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -51,7 +51,6 @@ function ExtensionWithPluginState(props) {
   editorAppearance !== 'full-width';
   const classNames = classnames('extension-container', 'block', shadowClassNames, {
     'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
@@ -114,7 +113,9 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: classNames,
+    className: classNames
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: wrapperStyle
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
@@ -128,6 +129,7 @@ function ExtensionWithPluginState(props) {
     className: 'extension-overlay',
     css: overlay
   }), jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: header,
     contentEditable: false
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -138,11 +140,12 @@ function ExtensionWithPluginState(props) {
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody &&
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
   jsx("div", {
     css: newContentStyles,
     className: newContentClassNames
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css: content,
     ref: handleContentDOMRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -2,40 +2,49 @@ import { css } from '@emotion/react';
 import { N30, N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export const wrapperStyle = css(wrapperDefault, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.without-frame': {
     background: 'transparent'
   },
   cursor: 'pointer',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.extension-overflow-wrapper:not(.with-body)': {
     overflowX: 'auto'
   },
-  '&.with-border': {
-    border: `1px solid transparent` // adding this so macro doesn't jump when hover border is shown
-  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-bodied-border': {
-    border: `1px solid ${`var(--ds-border, ${N30})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
     margin: `0 ${"var(--ds-space-negative-150, -12px)"}`,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    padding: '0 10px' // need exact number here to match editor elements' width
+    padding: `0 ${"var(--ds-space-150, 12px)"}`
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const header = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0px`,
   verticalAlign: 'middle',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&.with-children:not(.without-frame)': {
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.without-frame': {
     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 content = css({
   padding: "var(--ds-space-100, 8px)",
   background: "var(--ds-surface, white)",
@@ -43,21 +52,27 @@ export const content = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   cursor: 'initial',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.remove-border': {
     border: 'none'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const contentWrapper = css({
   padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
   display: 'flex',
   justifyContent: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-padding-styles': {
     padding: "var(--ds-space-100, 8px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const overflowWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-margin-styles': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    margin: `0 -10px` // need exact number here to match editor elements' width
+    margin: `0 ${"var(--ds-space-negative-150, -12px)"}`
   }
 });

package/dist/es2019/extensibility/Extension/InlineExtension/index.js

@@ -27,7 +27,6 @@ const InlineExtension = props => {
     'with-overlay': !showMacroInteractionDesignUpdates,
     'with-children': hasChildren,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
-    'with-border': showMacroInteractionDesignUpdates,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
   });
   const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
@@ -44,7 +43,9 @@ const InlineExtension = props => {
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     setIsNodeHovered: setIsNodeHovered
   }), jsx("div", {
-    "data-testid": "inline-extension-wrapper",
+    "data-testid": "inline-extension-wrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyles]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/extensibility/Extension/InlineExtension/styles.js

@@ -1,10 +1,13 @@
 import { css } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { wrapperDefault } from '../styles';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export const wrapperStyle = css(wrapperDefault, {
   cursor: 'pointer',
   display: 'inline-flex',
   margin: `1px 1px ${"var(--ds-space-050, 4px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> img': {
     borderRadius: "var(--ds-border-radius, 3px)"
   },
@@ -14,22 +17,25 @@ export const wrapperStyle = css(wrapperDefault, {
     width: '1px',
     content: "''"
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-children': {
     padding: 0,
     background: "var(--ds-background-neutral-subtle, white)"
   },
-  '&.with-border': {
-    border: `1px solid transparent` // adding this so macro doesn't jump when hover border is shown
-  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.with-hover-border': {
-    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
+    boxShadow: `0 0 0 1px ${`var(--ds-border-input, ${N500})`}`
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const inlineWrapperStyles = css({
   maxWidth: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'tr &': {
     maxWidth: 'inherit'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.rich-media-item': {
     maxWidth: '100%'
   }

package/dist/es2019/extensibility/Extension/Lozenge/ExtensionLabel.js

@@ -12,11 +12,13 @@ const labelStyles = css({
   // Unfortunately, these need to be these exact numbers - otherwise there will be a noticeable gap/overlap
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
   top: '-19px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     top: '-18px',
     marginLeft: "var(--ds-space-150, 12px)"
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.show-label': {
     cursor: 'pointer',
     background: `var(--ds-background-accent-gray-subtle-pressed, ${N40})`,
@@ -25,20 +27,20 @@ const labelStyles = css({
   },
   borderRadius: `${"var(--ds-border-radius, 3px)"} ${"var(--ds-border-radius, 3px)"} 0 0`,
   lineHeight: 1,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.nested': {
     // Need to add indent if the node is nested since we removed previous indentation styles to make it fit properly
     // in the nested component
     marginLeft: "var(--ds-space-150, 12px)"
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-background': {
     background: `var(--ds-surface, ${N0})`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied-border': {
-    border: `1px solid ${`var(--ds-border, ${N30})`}`
-  },
-  // to account for bodied having borders now - adding this to help with less conditional styling
-  border: '1px solid transparent',
-  borderBottom: 'none'
+    boxShadow: `0 0 0 1px ${`var(--ds-border, ${N30})`}`
+  }
 });
 const textStyles = css({
   fontSize: '14px',
@@ -49,6 +51,7 @@ const containerStyles = css({
   textAlign: 'left',
   zIndex: 1,
   position: 'relative',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.bodied': {
     marginTop: "var(--ds-space-300, 24px)"
   }
@@ -85,7 +88,9 @@ export const ExtensionLabel = ({
   }, [setIsNodeHovered]);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    css: containerStyles,
+    css: containerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: containerClassNames
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/extensibility/Extension/Lozenge/LozengeComponent.js

@@ -34,18 +34,23 @@ export const LozengeComponent = ({
     });
   }
   const isBlockExtension = extensionName === 'extension';
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage({
-    height: ICON_SIZE,
-    width: ICON_SIZE,
-    ...lozengeData
-  }) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage({
+      height: ICON_SIZE,
+      width: ICON_SIZE,
+      ...lozengeData
+    }) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)))
+  );
 };

package/dist/es2019/extensibility/Extension/Lozenge/index.js

@@ -17,6 +17,7 @@ export default class ExtensionLozenge extends Component {
         url,
         ...rest
       } = lozengeData;
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       return jsx("img", _extends({
         css: styledImage,
         src: url