@atlaskit/editor-common 74.0.1 → 74.1.0

package/dist/es2019/preset/plugin-injection-api.js

@@ -187,8 +187,10 @@ export class EditorPluginInjectionAPI {
         }
         const plugin = getPluginByName(prop);
         if (!plugin) {
-          // eslint-disable-next-line
-          console.error(`Plugin: ${prop} does not exist`);
+          if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line
+            console.warn(`Plugin: ${prop} does not exist`);
+          }
           return undefined;
         }
         const sharedState = sharedStateAPI.createAPI(plugin);

package/dist/es2019/resizer.js

@@ -0,0 +1 @@
+export { default as ResizerNext } from './ui/Resizer';

package/dist/es2019/styles/index.js

@@ -21,4 +21,5 @@ export { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/sma
 export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
-export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
+export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
+export { resizerStyles } from './shared/resizer';

package/dist/es2019/styles/shared/blockquote.js

@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { gridSize } from '@atlaskit/theme/constants';
 export const blockquoteSharedStyles = css`
   & blockquote {
     box-sizing: border-box;
-    padding-left: ${gridSize() * 2}px;
+    padding-left: ${"var(--ds-space-200, 16px)"};
     border-left: 2px solid
       ${`var(--ds-border, ${akEditorBlockquoteBorderColor})`};
     margin: ${blockNodesVerticalMargin} 0 0 0;
@@ -12,7 +11,7 @@ export const blockquoteSharedStyles = css`
 
     [dir='rtl'] & {
       padding-left: 0;
-      padding-right: ${gridSize() * 2}px;
+      padding-right: ${"var(--ds-space-200, 16px)"};
     }
 
     &:first-child {

package/dist/es2019/styles/shared/code-block.js

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
+import { borderRadius, fontSize } from '@atlaskit/theme/constants';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -59,15 +59,16 @@ export const codeBlockSharedStyles = props => css`
     light: `var(--ds-background-neutral, ${N20})`,
     dark: `var(--ds-background-neutral, ${DN50})`
   })(props),
-  leftCoverWidth: `${gridSize() * 3}px`
+  leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
 
       background-repeat: no-repeat;
       background-attachment: local, local, local, local, scroll, scroll, scroll,
         scroll;
-      background-size: ${gridSize() * 3}px 100%, ${gridSize() * 3}px 100%,
-        ${gridSize()}px 100%, ${gridSize()}px 100%, ${gridSize()}px 100%,
-        1px 100%, ${gridSize()}px 100%, 1px 100%;
+      background-size: ${"var(--ds-space-300, 24px)"} 100%,
+        ${"var(--ds-space-300, 24px)"} 100%, ${"var(--ds-space-100, 8px)"} 100%,
+        ${"var(--ds-space-100, 8px)"} 100%, ${"var(--ds-space-100, 8px)"} 100%,
+        1px 100%, ${"var(--ds-space-100, 8px)"} 100%, 1px 100%;
       background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
 
       /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
@@ -81,7 +82,7 @@ export const codeBlockSharedStyles = props => css`
   light: `var(--ds-background-neutral, ${N30})`,
   dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
-      padding: ${gridSize()}px;
+      padding: ${"var(--ds-space-100, 8px)"};
       position: relative;
 
       span {
@@ -116,7 +117,7 @@ export const codeBlockSharedStyles = props => css`
   dark: `var(--ds-text, ${DN800})`
 })(props)};
         border-radius: ${borderRadius()}px;
-        margin: ${gridSize()}px;
+        margin: ${"var(--ds-space-100, 8px)"};
         white-space: pre;
         font-size: ${relativeFontSizeToBase16(fontSize())};
         line-height: 1.5rem;

package/dist/es2019/styles/shared/extension.js

@@ -1,3 +1,7 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export const EXTENSION_PADDING = gridSize();
 export const BODIED_EXT_PADDING = EXTENSION_PADDING * 2;

package/dist/es2019/styles/shared/layout.js

@@ -1,3 +1,7 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export const LAYOUT_SECTION_MARGIN = gridSize();
 export const LAYOUT_COLUMN_PADDING = gridSize() * 1.5;

package/dist/es2019/styles/shared/panel.js

@@ -7,6 +7,7 @@ import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors 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';
 const lightPanelColors = {
   info: colors.B50,
@@ -103,6 +104,8 @@ const tokenDarkPanelColors = {
   error: `var(--ds-background-danger, ${darkPanelColors['error']})`
 };
 
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
@@ -202,7 +205,7 @@ const mainDynamicStyles = panelType => props => {
 export const panelSharedStylesWithoutPrefix = props => css`
   border-radius: ${borderRadius()}px;
   margin: ${blockNodesVerticalMargin} 0 0;
-  padding: ${gridSize()}px;
+  padding: ${"var(--ds-space-100, 8px)"};
   min-width: ${akEditorTableCellMinWidth}px;
   display: flex;
   position: relative;
@@ -213,10 +216,10 @@ export const panelSharedStylesWithoutPrefix = props => css`
 
   .${PanelSharedCssClassName.icon} {
     flex-shrink: 0;
-    height: ${gridSize() * 3}px;
-    width: ${gridSize() * 3}px;
+    height: ${"var(--ds-space-300, 24px)"};
+    width: ${"var(--ds-space-300, 24px)"};
     box-sizing: content-box;
-    padding-right: ${gridSize()}px;
+    padding-right: ${"var(--ds-space-100, 8px)"};
     text-align: center;
     user-select: none;
     -moz-user-select: none;

package/dist/es2019/styles/shared/resizer.js

@@ -0,0 +1,72 @@
+import { css } from '@emotion/react';
+import { B200, N60 } from '@atlaskit/theme/colors';
+/*
+  Styles in this file are based on
+  packages/editor/editor-core/src/plugins/media/styles.ts
+*/
+
+export const resizerItemClassName = 'resizer-item';
+export const resizerHandleRightClassName = 'resizer-handle-right';
+export const resizerHandleLeftClassName = 'resizer-handle-left';
+
+// akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
+const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+export const resizerHandlePadding = 13;
+export const resizerHandleZIndex = 99;
+export const resizerStyles = css`
+  .${resizerItemClassName} {
+    background: ${`var(--ds-border-focused, ${B200})`};
+  }
+
+  .${resizerHandleRightClassName}, .${resizerHandleLeftClassName} {
+    display: flex;
+    flex-direction: column;
+
+    /* vertical align */
+    justify-content: center;
+  }
+
+  .${resizerHandleRightClassName} {
+    align-items: flex-end;
+    /* padding-right: 12px; */
+    /* margin-right: -${resizerHandlePadding}px; */
+  }
+
+  .${resizerHandleLeftClassName} {
+    align-items: flex-start;
+    /* padding-left: 12px; */
+    /* margin-left: -${resizerHandlePadding}px; */
+  }
+
+  .${resizerHandleRightClassName}::after,
+    .${resizerHandleLeftClassName}::after {
+    content: ' ';
+    display: flex;
+    width: 3px;
+    height: 64px;
+
+    border-radius: 6px;
+  }
+
+  .${resizerItemClassName}:hover
+    .${resizerHandleLeftClassName}::after,
+    .${resizerItemClassName}:hover
+    .${resizerHandleRightClassName}::after {
+    background: ${`var(--ds-border, ${N60})`};
+  }
+
+  .${akEditorSelectedNodeClassName}
+    .${resizerHandleRightClassName}::after,
+    .${akEditorSelectedNodeClassName}
+    .${resizerHandleLeftClassName}::after,
+    .${resizerItemClassName}
+    .${resizerHandleRightClassName}:hover::after,
+    .${resizerItemClassName}
+    .${resizerHandleLeftClassName}:hover::after,
+    .${resizerItemClassName}.is-resizing
+    .${resizerHandleRightClassName}::after,
+    .${resizerItemClassName}.is-resizing
+    .${resizerHandleLeftClassName}::after {
+    background: ${`var(--ds-border-focused, ${B200})`};
+  }
+`;

package/dist/es2019/styles/shared/smart-card.js

@@ -1,4 +1,5 @@
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 export const SmartCardSharedCssClassName = {
   INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
@@ -6,6 +7,9 @@ export const SmartCardSharedCssClassName = {
   EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
   LOADER_WRAPPER: 'loader-wrapper'
 };
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
 export const smartCardSharedStyles = `
   .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
     display: block;

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

@@ -5,7 +5,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';
@@ -161,7 +160,7 @@ const tableSharedStyle = props => css`
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
-  leftCoverWidth: `${gridSize() * 3}px`
+  leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
 
               background-color: ${themed({
@@ -184,7 +183,7 @@ const tableSharedStyle = props => css`
     light: "var(--ds-background-neutral, rgb(235, 237, 240))",
     dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
-  leftCoverWidth: `${gridSize() * 3}px`
+  leftCoverWidth: "var(--ds-space-300, 24px)"
 })}!important;
 
               background-color: ${themed({

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

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

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

@@ -5,11 +5,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';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.0.1";
+const packageVersion = "74.1.0";
 const halfFocusRing = 1;
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with token('space.100', '8px') after verfiying Popper can accept this
 const dropOffset = `0, ${gridSize()}px`;
 class DropList extends Component {
   constructor(...args) {
@@ -36,11 +39,12 @@ class DropList extends Component {
         dark: `var(--ds-surface-overlay, ${DN50})`
       })(theme)};
       border-radius: ${borderRadius()}px;
-      box-shadow: 0 ${gridSize() / 2}px ${gridSize()}px -${gridSize() / 4}px ${N50A},
+      box-shadow: 0 ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}
+          calc(-1 * ${"var(--ds-space-025, 2px)"}) ${N50A},
         0 0 1px ${N60A};
       box-sizing: border-box;
       overflow: auto;
-      padding: ${gridSize() / 2}px 0;
+      padding: ${"var(--ds-space-050, 4px)"} 0;
       max-height: 90vh;
     `;
     });

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, EVENT_TYPE } from '../../analytics';
+import { logException } from '../../monitoring/error';
 export class ErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
@@ -29,6 +31,11 @@ export class ErrorBoundary extends React.Component {
         }
       });
     }
+    if (getBooleanFF('platform.editor.sentry-error-monitoring_6bksu')) {
+      logException(error, {
+        location: 'editor-common'
+      });
+    }
     if (this.hasFallback()) {
       this.setState({
         errorCaptured: true

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

@@ -6,6 +6,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 const messages = defineMessages({
   collapseNode: {
@@ -29,7 +30,7 @@ export const messages = defineMessages({
     description: 'Placeholder text for an expand node title input field'
   }
 });
-const BORDER_RADIUS = gridSize() / 2;
+const BORDER_RADIUS = "var(--ds-radius-100, 4px)";
 const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 const EXPAND_SELECTED_BACKGROUND = themed({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -56,7 +57,7 @@ const expandIconWrapperStyle = props => css`
   light: `var(--ds-icon, ${colors.N90})`,
   dark: "var(--ds-icon, #d9dde3)"
 })(props)};
-  border-radius: ${gridSize() / 2}px;
+  border-radius: ${"var(--ds-radius-100, 4px)"};
   width: 24px;
   height: 24px;
 
@@ -74,8 +75,8 @@ const expandIconWrapperExpandedStyle = css`
   }
 `;
 export const expandLayoutWrapperStyle = css`
-  width: ${gridSize() * 3}px;
-  height: ${gridSize() * 3}px;
+  width: ${"var(--ds-space-300, 24px)"};
+  height: ${"var(--ds-space-300, 24px)"};
 `;
 export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -93,6 +94,8 @@ const containerStyles = styleProps => {
     expanded,
     focused
   } = styleProps;
+  // TODO: Migrate away from gridSize
+  // Recommendation: Verify if this is intentional: 8 / 4 / 14 rem = 4.57px?
   const marginTop = `${gridSize() / 2 / fontSize()}rem`;
   const marginBottom = 0;
   // Only only these margins if the expand isn't editable
@@ -103,14 +106,14 @@ const containerStyles = styleProps => {
     border-width: 1px;
     border-style: solid;
     border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR};
-    border-radius: ${BORDER_RADIUS}px;
+    border-radius: ${BORDER_RADIUS};
     min-height: 25px;
     background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps)};
     margin: ${margin};
 
     transition: background 0.3s ${akEditorSwoopCubicBezier},
       border-color 0.3s ${akEditorSwoopCubicBezier};
-    padding: ${gridSize()}px;
+    padding: ${"var(--ds-space-100, 8px)"};
 
     &:hover {
       // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
@@ -131,8 +134,10 @@ const containerStyles = styleProps => {
   `;
 };
 const contentStyles = styleProps => themeProps => css`
-    padding-top: ${styleProps.expanded ? gridSize() : 0}px;
-    padding-right: ${gridSize()}px;
+    padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
+    padding-right: ${"var(--ds-space-100, 8px)"};
+    // TODO: Migrate away from gridSize
+    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px
     padding-left: ${gridSize() * 4 - gridSize() / 2}px;
     display: flow-root;
 
@@ -170,7 +175,7 @@ const titleInputStyles = props => css`
   background: transparent;
   display: flex;
   flex: 1;
-  padding: 0 0 0 ${gridSize() / 2}px;
+  padding: 0 0 0 ${"var(--ds-space-050, 4px)"};
   width: 100%;
 
   &::placeholder {

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import Button from '@atlaskit/button/custom-theme-button';
+import Tooltip from '@atlaskit/tooltip';
+import { getButtonStyles, iconOnlySpacing } from './styles';
+export default (({
+  title,
+  icon,
+  iconAfter,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  selected,
+  disabled,
+  href,
+  target,
+  appearance = 'subtle',
+  children,
+  className,
+  tooltipContent,
+  testId,
+  hideTooltipOnClick = true,
+  ariaHasPopup,
+  tabIndex,
+  areaControls,
+  ariaLabel
+}) => {
+  // Check if there's only an icon and add additional styles
+  const iconOnly = (icon || iconAfter) && !children;
+  const 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: (adgTheme, themeProps) => {
+      const {
+        buttonStyles,
+        ...rest
+      } = adgTheme(themeProps);
+      return {
+        buttonStyles: {
+          ...buttonStyles,
+          ...customSpacing,
+          ...(appearance === 'danger' && getButtonStyles({
+            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/es2019/ui/FloatingToolbar/styles.js

@@ -0,0 +1,64 @@
+import { hexToRgba } from '@atlaskit/adf-schema';
+import * as colors from '@atlaskit/theme/colors';
+export const 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'
+  }
+};
+const getStyles = (property, {
+  appearance = 'default',
+  state = 'default',
+  mode = 'light'
+}) => {
+  if (!property[appearance] || !property[appearance][state]) {
+    return 'initial';
+  }
+  return property[appearance][state][mode];
+};
+const background = {
+  danger: {
+    default: {
+      light: 'inherit',
+      dark: 'inherit'
+    },
+    hover: {
+      light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`
+    },
+    active: {
+      light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`,
+      dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`
+    }
+  }
+};
+const color = {
+  danger: {
+    default: {
+      light: `var(--ds-icon, ${colors.N400})`,
+      dark: `var(--ds-icon, ${colors.DN400})`
+    },
+    hover: {
+      light: `var(--ds-icon-danger, ${colors.R400})`,
+      dark: `var(--ds-icon-danger, ${colors.R400})`
+    },
+    active: {
+      light: `var(--ds-icon-danger, ${colors.R400})`,
+      dark: `var(--ds-icon-danger, ${colors.R400})`
+    }
+  }
+};
+export const getButtonStyles = props => ({
+  background: getStyles(background, props),
+  color: getStyles(color, props)
+});

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

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

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

@@ -3,11 +3,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 const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
-export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
   return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
 };

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

@@ -4,7 +4,6 @@ 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';
 const errorColor = css`
   color: ${`var(--ds-text-danger, ${R400})`};
@@ -15,13 +14,13 @@ const validColor = css`
 const messageStyle = props => css`
   ${h200(props)} font-weight: normal;
   color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-top: ${gridSize() / 2}px;
+  margin-top: ${"var(--ds-space-050, 4px)"};
   display: flex;
   justify-content: baseline;
 `;
 const iconWrapperStyle = css`
   display: flex;
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
 `;
 export const HelperMessage = ({
   children