@atlaskit/editor-common 74.0.0 → 74.1.0

package/dist/esm/styles/shared/table.js

@@ -7,7 +7,6 @@ import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, ta
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { gridSize } from '@atlaskit/theme/constants';
 import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
 import { tableCellBackgroundStyleOverride } from './tableCell';
@@ -57,7 +56,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: "var(--ds-background-neutral, rgb(235, 237, 240))",
       dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
-    leftCoverWidth: "".concat(gridSize() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }), themed({
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
@@ -69,7 +68,7 @@ var tableSharedStyle = function tableSharedStyle(props) {
       light: "var(--ds-background-neutral, rgb(235, 237, 240))",
       dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
-    leftCoverWidth: "".concat(gridSize() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }), themed({
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"

package/dist/esm/types/performance-tracking.js

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

package/dist/esm/ui/DropList/index.js

@@ -15,11 +15,14 @@ import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.0.0";
+var packageVersion = "74.1.0";
 var halfFocusRing = 1;
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with token('space.100', '8px') after verfiying Popper can accept this
 var dropOffset = "0, ".concat(gridSize(), "px");
 var DropList = /*#__PURE__*/function (_Component) {
   _inherits(DropList, _Component);
@@ -35,13 +38,13 @@ var DropList = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", " ", "\n          calc(-1 * ", ") ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), themed({
         light: "var(--ds-text, ".concat(N900, ")"),
         dark: "var(--ds-text, ".concat(DN600, ")")
       })(theme), themed({
         light: "var(--ds-surface-overlay, ".concat(N0, ")"),
         dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
-      })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
+      })(theme), borderRadius(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)", N50A, N60A, "var(--ds-space-050, 4px)");
     });
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
       _this.setContentWidth();

package/dist/esm/ui/ErrorBoundary/index.js

@@ -8,7 +8,9 @@ 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; } }
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, EVENT_TYPE } from '../../analytics';
+import { logException } from '../../monitoring/error';
 export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ErrorBoundary, _React$Component);
   var _super = _createSuper(ErrorBoundary);
@@ -51,6 +53,11 @@ export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if (getBooleanFF('platform.editor.sentry-error-monitoring_6bksu')) {
+        logException(error, {
+          location: 'editor-common'
+        });
+      }
       if (this.hasFallback()) {
         this.setState({
           errorCaptured: true

package/dist/esm/ui/Expand/index.js

@@ -10,6 +10,7 @@ import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 export var messages = defineMessages({
   collapseNode: {
@@ -33,7 +34,7 @@ export var messages = defineMessages({
     description: 'Placeholder text for an expand node title input field'
   }
 });
-var BORDER_RADIUS = gridSize() / 2;
+var BORDER_RADIUS = "var(--ds-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = themed({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -55,13 +56,13 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   }, children);
 };
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
     light: "var(--ds-icon, ".concat(colors.N90, ")"),
     dark: "var(--ds-icon, #d9dde3)"
-  })(props), gridSize() / 2, "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
+  })(props), "var(--ds-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
-export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
+export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
@@ -74,6 +75,8 @@ export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props,
 var containerStyles = function containerStyles(styleProps) {
   var expanded = styleProps.expanded,
     focused = styleProps.focused;
+  // TODO: Migrate away from gridSize
+  // Recommendation: Verify if this is intentional: 8 / 4 / 14 rem = 4.57px?
   var marginTop = "".concat(gridSize() / 2 / fontSize(), "rem");
   var marginBottom = 0;
   // Only only these margins if the expand isn't editable
@@ -81,7 +84,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", themed({
       light: "var(--ds-border, ".concat(colors.N50A, ")"),
       dark: "var(--ds-border, ".concat(colors.DN50, ")")
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
@@ -89,14 +92,14 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? gridSize() : 0, gridSize(), gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles(props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
     light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
     dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
-  })(props), gridSize() / 2, themed({
+  })(props), "var(--ds-space-050, 4px)", themed({
     light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
     dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props));

package/dist/esm/ui/FloatingToolbar/Button.js

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["buttonStyles"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import Button from '@atlaskit/button/custom-theme-button';
+import Tooltip from '@atlaskit/tooltip';
+import { getButtonStyles, iconOnlySpacing } from './styles';
+export default (function (_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    iconAfter = _ref.iconAfter,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    selected = _ref.selected,
+    disabled = _ref.disabled,
+    href = _ref.href,
+    target = _ref.target,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+    children = _ref.children,
+    className = _ref.className,
+    tooltipContent = _ref.tooltipContent,
+    testId = _ref.testId,
+    _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
+    hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
+    ariaHasPopup = _ref.ariaHasPopup,
+    tabIndex = _ref.tabIndex,
+    areaControls = _ref.areaControls,
+    ariaLabel = _ref.ariaLabel;
+  // Check if there's only an icon and add additional styles
+  var iconOnly = (icon || iconAfter) && !children;
+  var customSpacing = iconOnly ? iconOnlySpacing : {};
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: tooltipContent || title,
+    hideTooltipOnClick: hideTooltipOnClick,
+    position: "top"
+  }, /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: className,
+    theme: function theme(adgTheme, themeProps) {
+      var _adgTheme = adgTheme(themeProps),
+        buttonStyles = _adgTheme.buttonStyles,
+        rest = _objectWithoutProperties(_adgTheme, _excluded);
+      return _objectSpread({
+        buttonStyles: _objectSpread(_objectSpread(_objectSpread({}, buttonStyles), customSpacing), appearance === 'danger' && getButtonStyles({
+          appearance: appearance,
+          state: themeProps.state,
+          mode: themeProps.mode
+        }))
+      }, rest);
+    },
+    "aria-label": ariaLabel || title,
+    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-expanded": ariaHasPopup ? selected : undefined,
+    "aria-controls": ariaHasPopup ? areaControls : undefined,
+    spacing: 'compact',
+    href: href,
+    target: target,
+    appearance: appearance,
+    "aria-haspopup": ariaHasPopup,
+    iconBefore: icon || undefined,
+    iconAfter: iconAfter,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    isSelected: selected,
+    isDisabled: disabled,
+    testId: testId,
+    onFocus: onFocus,
+    onBlur: onBlur
+    // @ts-ignore
+    // tabIndex set as 0 by default in the design system  ButtonBase component
+    // this is not expected for all buttons, we have to use tabIndex={null} for some cases
+    // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
+    ,
+    tabIndex: tabIndex
+  }, children)));
+});

package/dist/esm/ui/FloatingToolbar/styles.js

@@ -0,0 +1,68 @@
+import { hexToRgba } from '@atlaskit/adf-schema';
+import * as colors from '@atlaskit/theme/colors';
+export var iconOnlySpacing = {
+  '&&': {
+    padding: '0px',
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
+      padding: '0 2px'
+    }
+  },
+  '& > span': {
+    margin: '0px'
+  }
+};
+var getStyles = function getStyles(property, _ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'light' : _ref$mode;
+  if (!property[appearance] || !property[appearance][state]) {
+    return 'initial';
+  }
+  return property[appearance][state][mode];
+};
+var background = {
+  danger: {
+    default: {
+      light: 'inherit',
+      dark: 'inherit'
+    },
+    hover: {
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
+    },
+    active: {
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")")
+    }
+  }
+};
+var color = {
+  danger: {
+    default: {
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
+    },
+    hover: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    },
+    active: {
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
+    }
+  }
+};
+export var getButtonStyles = function getButtonStyles(props) {
+  return {
+    background: getStyles(background, props),
+    color: getStyles(color, props)
+  };
+};

package/dist/esm/ui/MediaSingle/grid.js

@@ -1,3 +1,4 @@
+import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 var handleMargin = 12;
 var gutterSize = handleMargin * 2;
 var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
@@ -20,6 +21,53 @@ export function calcPctFromPx(width, lineLength) {
   var maxWidth = lineLength + gutterSize;
   return (width + gutterSize) / maxWidth;
 }
+export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
+var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
+  return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+};
+export var calcMediaPxWidth = function calcMediaPxWidth(opts) {
+  var origWidth = opts.origWidth,
+    origHeight = opts.origHeight,
+    layout = opts.layout,
+    pctWidth = opts.pctWidth,
+    containerWidth = opts.containerWidth,
+    resizedPctWidth = opts.resizedPctWidth;
+  var width = containerWidth.width,
+    lineLength = containerWidth.lineLength;
+  var calculatedPctWidth = calcPctWidth(containerWidth, pctWidth, origWidth, origHeight);
+  var calculatedResizedPctWidth = calcPctWidth(containerWidth, resizedPctWidth, origWidth, origHeight);
+  if (layout === 'wide') {
+    if (lineLength) {
+      var wideWidth = Math.ceil(lineLength * breakoutWideScaleRatio);
+      return wideWidth > width ? lineLength : wideWidth;
+    }
+  } else if (layout === 'full-width') {
+    return width - akEditorBreakoutPadding;
+  } else if (calculatedPctWidth) {
+    if (wrappedLayouts.indexOf(layout) > -1) {
+      if (calculatedResizedPctWidth) {
+        if (resizedPctWidth < 50) {
+          return calculatedResizedPctWidth;
+        }
+        return calculatedPctWidth;
+      }
+      return Math.min(calculatedPctWidth, origWidth);
+    }
+    if (calculatedResizedPctWidth) {
+      return calculatedResizedPctWidth;
+    }
+    return calculatedPctWidth;
+  } else if (layout === 'center') {
+    if (calculatedResizedPctWidth) {
+      return calculatedResizedPctWidth;
+    }
+    return Math.min(origWidth, lineLength || width);
+  } else if (layout && wrappedLayouts.indexOf(layout) !== -1) {
+    var halfLineLength = Math.ceil((lineLength || width) / 2);
+    return origWidth <= halfLineLength ? origWidth : halfLineLength;
+  }
+  return origWidth;
+};
 export var snapToGrid = function snapToGrid(gridWidth, width, height, lineLength, gridSize) {
   var pxWidth = calcPxFromPct(gridWidth / 100, lineLength);
   var columnSpan = Math.round(calcColumnsFromPx(pxWidth, lineLength, gridSize));

package/dist/esm/ui/MediaSingle/index.js

@@ -4,11 +4,10 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { calcPxFromPct } from './grid';
+import { calcPxFromPct, wrappedLayouts } from './grid';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
-export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 export var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
   return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
 };

package/dist/esm/ui/Messages/index.js

@@ -6,14 +6,13 @@ import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
 var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
 var messageStyle = function messageStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() / 2);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
 };
-var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
   return jsx("div", {

package/dist/esm/ui/Resizer/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandleRightClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
+import { handleSides } from './utils';
+export default function ResizerNext(props) {
+  var resizable = React.useRef(null);
+  var handleResize = props.handleResize,
+    handleResizeStart = props.handleResizeStart,
+    handleResizeStop = props.handleResizeStop;
+  var onResizeStart = React.useCallback(function (event) {
+    // prevent creating a drag event on Firefox
+    event.preventDefault();
+    handleResizeStart();
+  }, [handleResizeStart]);
+  var onResize = React.useCallback(function (_event, _direction, _elementRef, delta) {
+    var resizableCurrent = resizable.current;
+    if (!resizableCurrent || !resizableCurrent.state.original) {
+      return;
+    }
+    var originalState = {
+      x: resizableCurrent.state.original.x,
+      y: resizableCurrent.state.original.y,
+      width: resizableCurrent.state.original.width,
+      height: resizableCurrent.state.original.height
+    };
+    handleResize(originalState, delta);
+  }, [handleResize]);
+  var onResizeStop = React.useCallback(function (_event, _direction, _elementRef, delta) {
+    var resizableCurrent = resizable.current;
+    if (!resizableCurrent || !resizableCurrent.state.original) {
+      return;
+    }
+    var originalState = {
+      x: resizableCurrent.state.original.x,
+      y: resizableCurrent.state.original.y,
+      width: resizableCurrent.state.original.width,
+      height: resizableCurrent.state.original.height
+    };
+    handleResizeStop(originalState, delta);
+  }, [handleResizeStop]);
+  var handles = {};
+  if (props.handleClassName) {
+    handleSides.forEach(function (side) {
+      handles[side] = "".concat(props.handleClassName, "-").concat(side);
+    });
+  } else {
+    handles = {
+      left: resizerHandleLeftClassName,
+      right: resizerHandleRightClassName
+    };
+  }
+  var innerPadding = props.innerPadding || resizerHandlePadding;
+  var handleStyles = {
+    left: {
+      width: '24px',
+      left: "-".concat(innerPadding, "px"),
+      zIndex: resizerHandleZIndex,
+      pointerEvents: 'auto'
+    },
+    right: {
+      width: '24px',
+      right: "-".concat(innerPadding, "px"),
+      zIndex: resizerHandleZIndex,
+      pointerEvents: 'auto'
+    }
+  };
+  var className = classnames(props.className, resizerItemClassName);
+  return /*#__PURE__*/React.createElement(Resizable, {
+    ref: resizable,
+    size: {
+      width: props.width,
+      // just content itself (no paddings)
+      height: 'auto'
+    },
+    maxWidth: props.maxWidth,
+    minWidth: props.minWidth,
+    className: className,
+    enable: props.enable,
+    handleClasses: handles,
+    handleStyles: handleStyles,
+    handleWrapperStyle: props.handleWrapperStyle //  is used to override the style of resize handles wrapper, needed for media when it is selected and caption appears makes sure the handlers won't jump.
+    ,
+    handleComponent: props.handleComponent // in media was added as a workaround to fix Up arrow key bug when media has caption and the cursor is place below the image. Our epic has a separate ticket to address this problem.
+    ,
+    onResizeStart: onResizeStart,
+    onResize: onResize,
+    onResizeStop: onResizeStop
+  }, props.children);
+}

package/dist/esm/ui/Resizer/types.js

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

package/dist/esm/ui/Resizer/utils.js

@@ -0,0 +1 @@
+export var handleSides = ['left', 'right'];

package/dist/esm/ui/index.js

@@ -1,7 +1,7 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, shouldAddDefaultWrappedWidth } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, shouldAddDefaultWrappedWidth } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
-export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid } from './MediaSingle/grid';
+export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';
 export { default as Popup, findOverflowScrollParent } from './Popup';
 export { default as UnsupportedBlock } from './UnsupportedBlock';
@@ -16,4 +16,5 @@ export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expa
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
-export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';
+export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';
+export { default as FloatingToolbarButton } from './FloatingToolbar/Button';

package/dist/esm/ui-color/ColorPalette/styles.js

@@ -1,5 +1,4 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
-export var colorPaletteWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), gridSize());
+export var colorPaletteWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/utils/editor-core-utils.js

@@ -1,6 +1,13 @@
 import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
 import { closest } from './dom';
+
+/**
+ * Checks if node is an empty paragraph.
+ */
+export function isEmptyParagraph(node) {
+  return !!node && node.type.name === 'paragraph' && !node.childCount;
+}
 export var stepHasSlice = function stepHasSlice(step) {
   return step && step.hasOwnProperty('slice');
 };