@atlaskit/editor-common 76.27.9 → 76.28.0

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

@@ -5,13 +5,11 @@ import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
 import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { EventDispatcher } from '../../event-dispatcher';
 import IntlProviderIfMissingWrapper from '../IntlProviderIfMissingWrapper';
-import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export class PortalProviderAPI extends EventDispatcher {
-  constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+  constructor(intl, onAnalyticsEvent, analyticsContext) {
     super();
     _defineProperty(this, "portals", new Map());
     _defineProperty(this, "setContext", context => {
@@ -20,7 +18,6 @@ export class PortalProviderAPI extends EventDispatcher {
     this.intl = intl;
     this.onAnalyticsEvent = onAnalyticsEvent;
     this.useAnalyticsContext = analyticsContext;
-    this.themeMode = themeMode;
   }
   render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
     this.portals.set(container, {
@@ -28,10 +25,7 @@ export class PortalProviderAPI extends EventDispatcher {
       hasAnalyticsContext,
       hasIntlContext
     });
-    const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-      mode: this.themeMode
-    }, children());
-    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
+    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, children()) : children();
     if (hasIntlContext) {
       wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
         value: this.intl
@@ -44,26 +38,21 @@ export class PortalProviderAPI extends EventDispatcher {
   // we (unfortunately) need to re-render to pass down any updated context.
   // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
   forceUpdate({
-    intl,
-    themeMode
+    intl
   }) {
     this.intl = intl;
-    this.themeMode = themeMode;
     this.portals.forEach((portal, container) => {
       if (!portal.hasAnalyticsContext && !this.useAnalyticsContext && !portal.hasIntlContext) {
         return;
       }
       let wrappedChildren = portal.children();
-      const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-        mode: themeMode
-      }, wrappedChildren);
       if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
-        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
+        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, wrappedChildren);
       }
       if (portal.hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
-        }, childrenWithThemeProviders);
+        }, wrappedChildren);
       }
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
     });
@@ -103,15 +92,14 @@ export class PortalProviderAPI extends EventDispatcher {
 class BasePortalProvider extends React.Component {
   constructor(props) {
     super(props);
-    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
   }
   render() {
     return this.props.render(this.portalProviderAPI);
   }
   componentDidUpdate() {
     this.portalProviderAPI.forceUpdate({
-      intl: this.props.intl,
-      themeMode: this.props.themeMode
+      intl: this.props.intl
     });
   }
 }
@@ -132,10 +120,8 @@ const PortalProviderWithThemeAndIntlProviders = ({
   render
 }) => {
   const intl = useIntl();
-  const globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
-    themeMode: globalTheme.mode,
     onAnalyticsEvent: onAnalyticsEvent,
     useAnalyticsContext: useAnalyticsContext,
     render: render

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

@@ -4,9 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -26,12 +24,9 @@ const colorPickerExpandContainer = css`
 // 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 = theme => css`
-  border-radius: ${borderRadius()}px;
-  background-color: ${themed({
-  light: `var(--ds-surface-overlay, ${N0})`,
-  dark: `var(--ds-surface-overlay, ${DN50})`
-})(theme)};
+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;
 `;
@@ -153,7 +148,7 @@ const ColorPickerButton = props => {
   };
   const title = props.title || '';
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  const buttonStyle = theme => {
+  const buttonStyle = () => {
     var _props$size, _props$size2, _props$size3;
     return css`
     padding: ${"var(--ds-space-075, 6px)"} 10px;
@@ -167,7 +162,7 @@ const ColorPickerButton = props => {
       align-self: center;
       content: '';
       border: 1px solid ${DEFAULT_BORDER_COLOR};
-      border-radius: ${borderRadius()}px;
+      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'};
@@ -175,10 +170,7 @@ const ColorPickerButton = props => {
       margin: 0px ${"var(--ds-space-025, 2px)"};
     }
     &:hover {
-      background: ${themed({
-      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
-    })(theme)};
+      background: ${`var(--ds-background-neutral-subtle-hovered, ${N30A})`};
     }
   `;
   };

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

@@ -7,8 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -27,59 +26,47 @@ const focusedMenuItemStyle = css`
   box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
   outline: none;
 `;
-const buttonStyles = (isActive, submenuActive) => theme => {
+const buttonStyles = (isActive, submenuActive) => {
   if (isActive) {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
     return css`
-        > span,
-        > span:hover,
-        > span:active {
-          background: ${"var(--ds-background-selected, #6c798f)"};
-          color: ${"var(--ds-text, #fff)"};
-        }
-        :focus > span[aria-disabled='false'] {
-          ${focusedMenuItemStyle};
-        }
-        :focus-visible,
-        :focus-visible > span[aria-disabled='false'] {
-          outline: none;
-        }
-      `;
+      > span,
+      > span:hover,
+      > span:active {
+        background: ${"var(--ds-background-selected, #6c798f)"};
+        color: ${"var(--ds-text, #fff)"};
+      }
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
+    `;
   } else {
     return css`
-        > span:hover[aria-disabled='false'] {
-          color: ${themed({
-      light: `var(--ds-text, ${N900})`,
-      dark: `var(--ds-text, ${DN600})`
-    })(theme)};
-          background-color: ${themed({
-      light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
-      dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
-    })(theme)};
-        }
-        ${!submenuActive && `
+      > span:hover[aria-disabled='false'] {
+        color: ${`var(--ds-text, ${N900})`};
+        background-color: ${"var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))"};
+      }
+      ${!submenuActive && `
           > span:active[aria-disabled='false'] {
-            background-color: ${themed({
-      light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
-      dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
-    })(theme)};
+            background-color: ${"var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"};
           }`}
-        > span[aria-disabled='true'] {
-          color: ${themed({
-      light: `var(--ds-text-disabled, ${N70})`,
-      dark: `var(--ds-text-disabled, ${DN80})`
-    })(theme)};
-        }
-        :focus > span[aria-disabled='false'] {
-          ${focusedMenuItemStyle};
-        }
-        :focus-visible,
-        :focus-visible > span[aria-disabled='false'] {
-          outline: none;
-        }
-      `; // The default focus-visible style is removed to ensure consistency across browsers
+      > span[aria-disabled='true'] {
+        color: ${`var(--ds-text-disabled, ${N70})`};
+      }
+      :focus > span[aria-disabled='false'] {
+        ${focusedMenuItemStyle};
+      }
+      :focus-visible,
+      :focus-visible > span[aria-disabled='false'] {
+        outline: none;
+      }
+    `; // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 
@@ -298,9 +285,7 @@ function DropdownMenuItem({
     setSubmenuActive(!!event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`));
   };
   const dropListItem = jsx("div", {
-    css: theme => buttonStyles(item.isActive, submenuActive)({
-      theme
-    }),
+    css: () => buttonStyles(item.isActive, submenuActive),
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive

package/dist/esm/media-inline/constants.js

@@ -1,3 +1,24 @@
+import { headingSizes } from '@atlaskit/theme/typography';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
-export var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export var DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
+
+/**
+ * Reference Heights
+ *
+ * These heights enforce consistent sizes with media inline nodes due to
+ * inconsistencies with center aligned inline nodes and text.
+ *
+ * There is conversation about refactoring media inline nodes to conform to
+ * aligning correctly with the surrounding text.
+ */
+export var referenceHeights = {
+  p: headingSizes.h600.lineHeight - 2,
+  h1: headingSizes.h800.lineHeight + 4,
+  h2: headingSizes.h700.lineHeight + 3,
+  h3: headingSizes.h600.lineHeight + 1,
+  h4: headingSizes.h500.lineHeight + 3,
+  h5: headingSizes.h400.lineHeight + 4,
+  h6: headingSizes.h300.lineHeight + 2
+};

package/dist/esm/media-inline/inline-image-wrapper.js

@@ -1,34 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/react';
-import { B300 } from '@atlaskit/theme/colors';
-var wrapperStyle = css({
-  display: 'inline-block',
-  verticalAlign: 'text-bottom',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)",
-  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
-});
-import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
-import { INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
-var selectedStyle = css({
-  cursor: 'pointer',
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
-  outline: 'none',
-  borderColor: 'transparent'
-});
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import { borderStyle, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME, selectedStyle, wrapperStyle } from './styles';
 export var InlineImageWrapper = function InlineImageWrapper(_ref) {
+  var _ref2;
   var children = _ref.children,
     isSelected = _ref.isSelected,
-    aspectRatio = _ref.aspectRatio;
-  var style = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
+    aspectRatio = _ref.aspectRatio,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
+  var borderStyleVars = borderSize && borderColor ? (_ref2 = {}, _defineProperty(_ref2, INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, borderSize), _defineProperty(_ref2, INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, hexToEditorBorderPaletteColor(borderColor) || borderColor), _ref2) : {};
+  var aspectStyleVars = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
   return (
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
     jsx("span", {
-      style: style,
+      style: _objectSpread(_objectSpread({}, borderStyleVars), aspectStyleVars),
       className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
-      css: [wrapperStyle, isSelected && selectedStyle],
+      css: [wrapperStyle, borderSize && borderColor && borderStyle, isSelected && selectedStyle],
       "data-testid": "inline-image-wrapper"
     }, children)
   );

package/dist/esm/media-inline/media-inline-image-card.js

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { Card } from '@atlaskit/media-card';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { messages } from '../messages/media-inline-card';
+import { referenceHeights } from './constants';
 import { InlineImageWrapper } from './inline-image-wrapper';
 import { InlineImageCardErrorView } from './views/error-view';
 import { InlineImageCardLoadingView } from './views/loading-view';
@@ -18,7 +18,8 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
     alt = _ref.alt,
     isLazy = _ref.isLazy,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    border = _ref.border;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
@@ -102,13 +103,15 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
       };
     }
     return {
-      width: Math.round(aspectRatio * headingSizes.h800.lineHeight),
-      height: headingSizes.h800.lineHeight
+      width: Math.round(aspectRatio * referenceHeights['h1']),
+      height: referenceHeights['h1']
     };
   }, [width, height, aspectRatio]);
   return jsx(InlineImageWrapper, {
     isSelected: isSelected,
-    aspectRatio: aspectRatio
+    aspectRatio: aspectRatio,
+    borderColor: border === null || border === void 0 ? void 0 : border.borderColor,
+    borderSize: border === null || border === void 0 ? void 0 : border.borderSize
   }, content(scaledDimension));
 };
 export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {

package/dist/esm/media-inline/styles.js

@@ -1,10 +1,42 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { headingSizes } from '@atlaskit/theme/typography';
+import { B300 } from '@atlaskit/theme/colors';
+import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO, DEFAULT_INLINE_IMAGE_BORDER_SIZE, referenceHeights } from './constants';
 export var INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
+export var INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY = '--editor-media-inline-image-border-size';
+export var INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY = '--editor-media-inline-image-border-color';
 var inlineImageHeight = function inlineImageHeight(height) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height);
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > span[data-mark-type='border']\n    > .mediaInlineView-content-wrap\n    > .", ",\n    > span[data-mark-type='border']\n    > .", ",\n    > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
 };
-export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // default inline image height is 24px, this includes\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5,\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, headingSizes.h600.lineHeight, inlineImageHeight(headingSizes.h800.lineHeight), inlineImageHeight(headingSizes.h700.lineHeight), inlineImageHeight(headingSizes.h500.lineHeight), inlineImageHeight(headingSizes.h400.lineHeight));
+
+/**
+ * Shifting the mediaInline image component (renders image) to align nicely with
+ * mediaInline (renders text) is a bit of a testing ground. This numbers represent
+ * shift in top and bottom and size adjustments to make up for lack of 1to1 size
+ * mapping
+ */
+export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, referenceHeights['p'], inlineImageHeight(referenceHeights['h1'], -3), inlineImageHeight(referenceHeights['h2'], -3), inlineImageHeight(referenceHeights['h3'], -2), inlineImageHeight(referenceHeights['h4'], -2), inlineImageHeight(referenceHeights['h5'], -2), inlineImageHeight(referenceHeights['h6'], -2));
+export var wrapperStyle = css({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
+});
+export var selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
+  outline: 'none'
+});
+export var borderStyle = css({
+  borderColor: "var(".concat(INLINE_IMAGE_BORDER_COLOR_CSS_VAR_KEY, ")"),
+  borderStyle: 'solid',
+  borderRadius: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 2px)"),
+  borderWidth: "calc(var(".concat(INLINE_IMAGE_BORDER_SIZE_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_BORDER_SIZE, ") * 1px)"),
+  boxSizing: "border-box"
+});

package/dist/esm/media-inline/views/icon-wrapper.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 var wrapperStyle = css({
   display: 'flex',
   'span > svg': {
-    verticalAlign: 'baseline'
+    verticalAlign: 'top'
   }
 });
 export var IconWrapper = function IconWrapper(_ref) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.27.9";
+var packageVersion = "76.28.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -2,37 +2,20 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export var annotationPrefix = 'ak-editor-annotation';
 export var AnnotationSharedClassNames = {
   focus: "".concat(annotationPrefix, "-focus"),
   blur: "".concat(annotationPrefix, "-blur"),
   draft: "".concat(annotationPrefix, "-draft")
 };
-var DY75 = 'rgb(111, 92, 37)';
-var DY300 = '#ffd557';
 var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
-var DY75a = 'rgba(111, 92, 37, 0.5)';
-var DY200 = '#82641c';
-export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
+export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
   return {
-    focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), themed({
-      light: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
-      dark: "var(--ds-background-accent-yellow-subtler, ".concat(DY75, ")")
-    })(props), themed({
-      light: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY300, ")")
-    })(props), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")),
-    blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), themed({
-      light: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
-      dark: "var(--ds-background-accent-yellow-subtlest, ".concat(DY75a, ")")
-    })(props), themed({
-      light: "var(--ds-border-accent-yellow, ".concat(Y200a, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY200, ")")
-    })(props))
+    focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"), "var(--ds-border-accent-yellow, ".concat(Y300, ")"), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")),
+    blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"), "var(--ds-border-accent-yellow, ".concat(Y200a, ")"))
   };
 };
-export var annotationSharedStyles = function annotationSharedStyles(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState(props).blur);
+export var annotationSharedStyles = function annotationSharedStyles() {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
 };

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

@@ -2,9 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 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 } from '@atlaskit/theme/constants';
+import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
 export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -14,25 +13,10 @@ export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
-export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-  })(props), borderRadius(), overflowShadow({
-    background: themed({
-      light: "var(--ds-background-neutral, ".concat(N20, ")"),
-      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-    })(props),
+export var codeBlockSharedStyles = function codeBlockSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", ";\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", ";\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
+    background: "var(--ds-background-neutral, ".concat(N20, ")"),
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
-    light: "var(--ds-background-neutral, ".concat(N30, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN20, ")")
-  })(props), "var(--ds-space-100, 8px)", themed({
-    light: "var(--ds-text-subtlest, ".concat(N400, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(DN400, ")")
-  })(props), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, themed({
-    light: "var(--ds-text, ".concat(N800, ")"),
-    dark: "var(--ds-text, ".concat(DN800, ")")
-  })(props), borderRadius(), "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()));
 };
 export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

package/dist/esm/styles/shared/code-mark.js

@@ -2,11 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
-import { DN70, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-export var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), themed({
-    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
-  })(props), getCodeStyles());
+import { N30A } from '@atlaskit/theme/colors';
+export var codeMarkSharedStyles = function codeMarkSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), "var(--ds-background-neutral, ".concat(N30A, ")"), getCodeStyles());
 };