@atlaskit/editor-common 78.11.3 → 78.11.5

package/dist/es2019/ui/MultiBodiedExtension/index.js

@@ -2,8 +2,6 @@
 
 import { css } from '@emotion/react';
 import { N30, N40 } from '@atlaskit/theme/colors';
-import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
-
 // Wraps the navigation bar and extensionFrames
 const mbeExtensionContainer = css({
   background: 'transparent !important',
@@ -12,6 +10,9 @@ const mbeExtensionContainer = css({
     right: `${"var(--ds-space-100, 8px)"} !important`
   },
   paddingBottom: "var(--ds-space-100, 8px)",
+  '&.remove-padding': {
+    paddingBottom: 0
+  },
   position: 'relative',
   verticalAlign: 'middle',
   cursor: 'pointer',
@@ -37,7 +38,11 @@ const mbeNavigation = css({
   borderBottom: 'none !important',
   background: "var(--ds-surface, white)",
   marginLeft: "var(--ds-space-100, 8px)",
-  marginRight: "var(--ds-space-100, 8px)"
+  marginRight: "var(--ds-space-100, 8px)",
+  '&.remove-margins': {
+    marginLeft: 0,
+    marginRight: 0
+  }
 });
 const extensionFrameContent = css({
   padding: `${"var(--ds-space-100, 8px)"} !important`,
@@ -55,12 +60,16 @@ const extensionFrameContent = css({
     paddingRight: `${"var(--ds-space-150, 12px)"} !important`
   },
   '.bodiedExtensionView-content-wrap': {
-    marginTop: `${BODIED_EXT_MBE_MARGIN_TOP}px !important`
+    marginTop: `${"var(--ds-space-150, 12px)"} !important`
   },
   '.extensionView-content-wrap': {
     marginTop: `${"var(--ds-space-100, 8px)"} !important`
   }
 });
+export const removeMargins = css({
+  marginLeft: 0,
+  marginRight: 0
+});
 export const sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer,
   mbeNavigation,

package/dist/es2019/ui/UnsupportedBlock/index.js

@@ -19,9 +19,9 @@ const blockNodeStyle = css`
   cursor: default;
   display: flex;
   font-size: ${relativeFontSizeToBase16(fontSize())};
-  margin: 10px 0;
+  margin: ${"var(--ds-space-100, 8px)"} 0;
   min-height: 24px;
-  padding: 10px;
+  padding: ${"var(--ds-space-150, 12px)"};
   text-align: center;
   vertical-align: text-bottom;
   min-width: 120px;

package/dist/es2019/ui/UnsupportedInline/index.js

@@ -11,21 +11,21 @@ import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-const inlineNodeStyle = css`
-  align-items: center;
-  background: ${`var(--ds-background-disabled, ${N30})`};
-  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-  cursor: default;
-  display: inline-flex;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  margin: 0 ${"var(--ds-space-025, 2px)"};
-  min-height: 24px;
-  padding: 0 10px;
-  vertical-align: middle;
-  white-space: nowrap;
-`;
+const inlineNodeStyle = css({
+  alignItems: 'center',
+  background: `var(--ds-background-disabled, ${N30})`,
+  border: `1px dashed ${`var(--ds-border-disabled, ${N50})`}`,
+  borderRadius: `${borderRadius()}px`,
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'inline-flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: `0 ${"var(--ds-space-025, 2px)"}`,
+  minHeight: '24px',
+  padding: `0 ${"var(--ds-space-100, 8px)"}`,
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap'
+});
 const UnsupportedInlineNode = ({
   node,
   intl,

package/dist/es2019/ui-color/ColorPalette/Color/styles.js

@@ -1,34 +1,30 @@
 import { css } from '@emotion/react';
 import { N0, N50, N900 } from '@atlaskit/theme/colors';
-
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const buttonStyle = css`
-  height: 26px;
-  width: 26px;
-  background: ${N900};
-  padding: 0;
-  border-radius: 4px;
-  border: 1px solid ${N0};
-  cursor: pointer;
-  display: block;
-`;
+export const buttonStyle = css({
+  height: '26px',
+  width: '26px',
+  background: `var(--ds-background-neutral, ${N900})`,
+  padding: 0,
+  borderRadius: '4px',
+  border: `1px solid ${`var(--ds-border-inverse, ${N0})`}`,
+  cursor: 'pointer',
+  display: 'block'
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-export const buttonWrapperStyle = css`
-  border: 1px solid transparent;
-  margin: 1px;
-  font-size: 0;
-  display: flex;
-  align-items: center;
-  padding: 1px;
-  border-radius: 6px;
-  &:focus-within,
-  &:focus,
-  &:hover {
-    border-color: ${N50} !important;
+export const buttonWrapperStyle = css({
+  border: '1px solid transparent',
+  fontSize: 0,
+  display: 'flex',
+  alignItems: 'center',
+  padding: "var(--ds-space-025, 2px)",
+  borderRadius: '6px',
+  '&:focus-within, &:focus, &:hover': {
+    borderColor: `${`var(--ds-border, ${N50})`} !important`
   }
-`;
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -14,22 +14,22 @@ import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 
 // helps adjusts position of popup
-const colorPickerButtonWrapper = css`
-  position: relative;
-`;
-const colorPickerExpandContainer = css`
-  margin: 0px ${"var(--ds-space-negative-050, -4px)"};
-`;
+const colorPickerButtonWrapper = css({
+  position: 'relative'
+});
+const colorPickerExpandContainer = css({
+  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+});
 
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-const colorPickerWrapper = () => css`
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  background-color: ${`var(--ds-surface-overlay, ${N0})`};
-  box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-  padding: ${"var(--ds-space-100, 8px)"} 0px;
-`;
+const colorPickerWrapper = () => css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`,
+  padding: `${"var(--ds-space-100, 8px)"} 0px`
+});
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
@@ -151,29 +151,28 @@ const ColorPickerButton = props => {
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
   const buttonStyle = () => {
     var _props$size, _props$size2, _props$size3;
-    return css`
-    padding: ${"var(--ds-space-075, 6px)"} 10px;
-    background-color: ${"var(--ds-background-neutral-subtle, transparent)"};
-    ${
-    /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
-    &:before {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      align-self: center;
-      content: '';
-      border: 1px solid ${DEFAULT_BORDER_COLOR};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      background-color: ${currentColor || 'transparent'};
-      width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
-      height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
-      padding: 0;
-      margin: 0px ${"var(--ds-space-025, 2px)"};
-    }
-    &:hover {
-      background: ${`var(--ds-background-neutral-subtle-hovered, ${N30A})`};
-    }
-  `;
+    return css({
+      padding: `${"var(--ds-space-075, 6px)"} 10px`,
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
+      height: `${!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''}`,
+      '&:before': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        content: "''",
+        border: `1px solid ${DEFAULT_BORDER_COLOR}`,
+        borderRadius: "var(--ds-border-radius, 3px)",
+        backgroundColor: currentColor || 'transparent',
+        width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
+        height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
+        padding: 0,
+        margin: `0px ${"var(--ds-space-025, 2px)"}`
+      },
+      '&:hover': {
+        background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+      }
+    });
   };
   return jsx("div", {
     css: colorPickerButtonWrapper

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -69,7 +69,6 @@ const buttonStyles = (isActive, submenuActive) => {
     `; // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
-
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 
 /**

package/dist/es2019/utils/dom.js

@@ -94,6 +94,7 @@ export function closestElement(node, s) {
  */
 // At time of writting prettier would strip the extend here.
 // prettier-ignore
+
 export function parsePx(pxStr) {
   if (!pxStr.endsWith('px')) {
     return undefined;

package/dist/es2019/with-plugin-state/index.js

@@ -11,6 +11,7 @@ const DEFAULT_SLOW_THRESHOLD = 4;
 // It was using some private types from
 // - EditorAction: packages/editor/editor-core/src/actions/index.ts
 // - EditorSharedConfig: packages/editor/editor-core/src/labs/next/internal/context/shared-config.tsx
+
 /**
  * @private
  * @deprecated

package/dist/esm/__tests_external__/page-objects/Editor.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 import { RendererPageObject } from './Renderer';
 export var EditorPageObject = /*#__PURE__*/function (_InProductTestPageObj) {

package/dist/esm/__tests_external__/page-objects/EditorSmartLink.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 import { BlockCardPageObject, EmbedCardPageObject, InlineCardPageObject } from '@atlaskit/smart-card/in-product';
 export var EditorSmartLinkPageObject = /*#__PURE__*/function (_InProductTestPageObj) {

package/dist/esm/__tests_external__/page-objects/Renderer.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
 export var RendererPageObject = /*#__PURE__*/function (_InProductTestPageObj) {
   _inherits(RendererPageObject, _InProductTestPageObj);

package/dist/esm/analytics/types/enums.js

@@ -164,6 +164,7 @@ export var INPUT_METHOD = /*#__PURE__*/function (INPUT_METHOD) {
   INPUT_METHOD["TYPEAHEAD"] = "typeAhead";
   INPUT_METHOD["DATASOURCE"] = "datasource_config";
   INPUT_METHOD["TABLE_CONTEXT_MENU"] = "tableContextMenu";
+  INPUT_METHOD["MOUSE"] = "mouse";
   return INPUT_METHOD;
 }({});
 export var TRIGGER_METHOD = /*#__PURE__*/function (TRIGGER_METHOD) {

package/dist/esm/analytics/types/table-events.js

@@ -23,6 +23,7 @@ export var TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["FIXED"] = "fixed";
   TABLE_ACTION["RESIZED"] = "resized";
   TABLE_ACTION["RESIZE_PERF_SAMPLING"] = "resizePerfSampling";
+  TABLE_ACTION["COLUMN_RESIZED"] = "columnResized";
   TABLE_ACTION["OVERFLOW_CHANGED"] = "overflowChanged";
   TABLE_ACTION["INITIAL_OVERFLOW_CAPTURED"] = "initialOverflowCaptured";
   TABLE_ACTION["MOVED_ROW"] = "movedRow";

package/dist/esm/annotation/index.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { EventEmitter } from 'events';
 export var AnnotationUpdateEmitter = /*#__PURE__*/function (_EventEmitter) {
   _inherits(AnnotationUpdateEmitter, _EventEmitter);

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -20,6 +20,7 @@ import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../util
 
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
+
 export var alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',

package/dist/esm/collab/index.js

@@ -7,8 +7,10 @@ import * as themeColors from '@atlaskit/theme/colors';
 
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
+
 // Format of the document and its metadata returned from the collab provider
 // after editing and for draft sync
+
 // Provider Errors
 // Emitted errors
 export var PROVIDER_ERROR_CODE = /*#__PURE__*/function (PROVIDER_ERROR_CODE) {
@@ -138,7 +140,10 @@ var telepointerColorStyle = function telepointerColorStyle(color, index) {
   return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
 };
 export var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
-export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+
+// Disable top: -14px since it is necessary to align to cursor
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: 0px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));
 var tintKey = 'collab:isDirtyTransaction';

package/dist/esm/element-browser/ElementBrowser.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
 import StatelessElementBrowser from './components/StatelessElementBrowser';
 var ElementBrowser = /*#__PURE__*/function (_PureComponent) {

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

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -27,7 +25,21 @@ import EmptyState from './EmptyState';
 import { getColumnCount, getScrollbarWidth } from './utils';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
-export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", borderRadius(), ICON_WIDTH, ICON_HEIGHT);
+export var itemIcon = css({
+  width: "".concat(ICON_WIDTH, "px"),
+  height: "".concat(ICON_HEIGHT, "px"),
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  div: {
+    width: "".concat(ICON_WIDTH, "px"),
+    height: "".concat(ICON_HEIGHT, "px")
+  }
+});
 function ElementList(_ref) {
   var items = _ref.items,
     mode = _ref.mode,
@@ -221,21 +233,86 @@ var ItemContent = /*#__PURE__*/memo(function (_ref6) {
     css: itemDescription
   }, description)));
 });
-var elementItemsWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: ", ";\n    }\n  }\n"])), ELEMENT_LIST_PADDING, ELEMENT_LIST_PADDING, "var(--ds-border-focused, ".concat(B100, ")"), "var(--ds-space-050, 4px)");
-var elementItemWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: ", " ", " 11px;\n    }\n  }\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-var itemBody = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: ", "; // Fixes the Item Icon and text's alignment issue\n"])), "var(--ds-space-negative-025, -2px)");
+var elementItemsWrapper = css({
+  flex: 1,
+  flexFlow: 'row wrap',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  overflow: 'hidden',
+  padding: "var(--ds-space-025, 2px)",
+  '.ReactVirtualized__Collection': {
+    borderRadius: '3px',
+    outline: 'none',
+    ':focus': {
+      boxShadow: "0 0 0 ".concat(ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, ".concat(B100, ")"))
+    }
+  },
+  '.ReactVirtualized__Collection__innerScrollContainer': {
+    "div[class='element-item-wrapper']:last-child": {
+      paddingBottom: "var(--ds-space-050, 4px)"
+    }
+  }
+});
+var elementItemWrapper = css({
+  div: {
+    button: {
+      height: '75px',
+      alignItems: 'flex-start',
+      padding: "var(--ds-space-150, 12px)"
+    }
+  }
+});
+var itemBody = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  width: '100%',
+  marginTop: "var(--ds-space-negative-025, -2px)"
+});
 
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
  * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
  */
-var multilineStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
-var itemDescription = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), multilineStyle, relativeFontSizeToBase16(11.67), "var(--ds-text-subtle, ".concat(N200, ")"), "var(--ds-space-025, 2px)");
-var itemText = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: inherit;\n  white-space: initial;\n"])));
-var itemTitleWrapper = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
-var itemTitle = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
-var itemAfter = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n\n  // Prevents item from being cut off due to negative margin\n  padding-top: ", ";\n  margin-bottom: ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-negative-025, -2px)");
-var itemIconStyle = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  img {\n    height: 40px;\n    width: 40px;\n    object-fit: cover;\n  }\n"])));
+var multilineStyle = css({
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical'
+});
+var itemDescription = css(multilineStyle, {
+  overflow: 'hidden',
+  fontSize: relativeFontSizeToBase16(11.67),
+  color: "var(--ds-text-subtle, ".concat(N200, ")"),
+  marginTop: "var(--ds-space-025, 2px)"
+});
+var itemText = css({
+  width: 'inherit',
+  whiteSpace: 'initial'
+});
+var itemTitleWrapper = css({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+var itemTitle = css({
+  width: '100%',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
+var itemAfter = css({
+  flex: '0 0 auto',
+  paddingTop: "var(--ds-space-025, 2px)",
+  marginBottom: "var(--ds-space-negative-025, -2px)"
+});
+var itemIconStyle = css({
+  img: {
+    height: '40px',
+    width: '40px',
+    objectFit: 'cover'
+  }
+});
 var MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'ElementList'
 })(ElementList));

package/dist/esm/element-browser/components/ElementList/EmptyState.js

@@ -2,6 +2,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
+import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState(_ref) {
   var onExternalLinkClick = _ref.onExternalLinkClick;
@@ -20,8 +21,8 @@ export default function EmptyState(_ref) {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), jsx("div", {
-    css: externalLinkWrapper
+  })), jsx(Box, {
+    xcss: externalLinkWrapper
   }, jsx(Button, {
     appearance: "primary",
     target: "_blank",
@@ -39,7 +40,7 @@ var emptyStateHeading = css({
   color: "var(--ds-text, rgb(23, 43, 77))",
   fontWeight: 500,
   letterSpacing: '-0.008em',
-  marginTop: '28px'
+  marginTop: "var(--ds-space-300, 24px)"
 });
 var emptyStateSubHeading = css({
   marginTop: "var(--ds-space-200, 16px)",
@@ -53,6 +54,6 @@ var emptyStateWrapper = css({
   alignItems: 'center',
   width: '100%'
 });
-var externalLinkWrapper = css({
-  marginTop: '14px'
+var externalLinkWrapper = xcss({
+  marginTop: "var(--ds-space-150, 12px)"
 });

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

@@ -112,8 +112,8 @@ function ElementSearch(_ref) {
   }, assistiveMessage));
 }
 var styledShortcut = css(shortcutStyle, {
-  padding: "".concat(GRID_SIZE / 2, "px ").concat(GRID_SIZE, "px"),
-  width: "".concat(GRID_SIZE * 6, "px")
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
+  width: "var(--ds-space-600, 48px)"
 });
 var wrapper = css({
   '& > [data-ds--text-field--container]': {
@@ -122,9 +122,8 @@ var wrapper = css({
     flex: '1 1 100%',
     overflow: 'visible',
     '& > [data-ds--text-field--input]': {
-      marginBottom: '3px',
       fontSize: relativeFontSizeToBase16(14),
-      padding: "".concat(GRID_SIZE, "px ", "var(--ds-space-075, 6px)", " ").concat(GRID_SIZE, "px 0")
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)", " 0")
     }
   }
 });

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

@@ -56,6 +56,9 @@ function ExtensionWithPluginState(props) {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
+  var contentClassNames = classnames({
+    'remove-padding': showMacroInteractionDesignUpdates
+  });
   var customContainerStyles = {
     width: '100%'
   };
@@ -97,7 +100,8 @@ function ExtensionWithPluginState(props) {
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
-    css: newContentStyles
+    css: newContentStyles,
+    className: contentClassNames
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,