@atlaskit/editor-common 76.27.8 → 76.27.10

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

@@ -14,7 +14,6 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -46,30 +45,21 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
 });
 var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
-var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
-  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
-  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
-});
+var EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
 var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(_colors.B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
-var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
-  light: "var(--ds-border, ".concat(_colors.N40A, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-});
+var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(_colors.N40A, ")");
 var ExpandIconWrapper = exports.ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
     expanded = _ref.expanded;
   return (0, _react2.jsx)("div", {
-    css: function css(props) {
-      return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
+    css: function css() {
+      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
     }
   }, children);
 };
-var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _components.themed)({
-    light: "var(--ds-icon, ".concat(_colors.N90, ")"),
-    dark: "var(--ds-icon, #d9dde3)"
-  })(props), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
+var expandIconWrapperStyle = function expandIconWrapperStyle() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), "var(--ds-icon, ".concat(_colors.N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
 var expandLayoutWrapperStyle = exports.expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
@@ -91,35 +81,20 @@ var containerStyles = function containerStyles(styleProps) {
   // and is the root level expand.
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
-  return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_colors.N50A, ")"),
-      dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-    })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
+  return function () {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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      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 : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
   };
 };
 var contentStyles = function contentStyles(styleProps) {
-  return function (themeProps) {
+  return function () {
     return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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)", (0, _constants.gridSize)() * 4 - (0, _constants.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          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
   };
 };
-var titleInputStyles = function titleInputStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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: ", ";\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(_colors.DN600, ")")
-  })(props), "var(--ds-space-050, 4px)", (0, _components.themed)({
-    light: 1,
-    dark: 0.6
-  })(props), (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(_colors.DN600, ")")
-  })(props));
+var titleInputStyles = function titleInputStyles() {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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: 1;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 };
-var titleContainerStyles = function titleContainerStyles(props) {
-  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: "var(--ds-text-subtle, ".concat(_colors.N300A, ")"),
-    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
-  })(props));
+var titleContainerStyles = function titleContainerStyles() {
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-text-subtle, ".concat(_colors.N300A, ")"));
 };
 var sharedExpandStyles = exports.sharedExpandStyles = {
   titleInputStyles: titleInputStyles,

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

@@ -15,8 +15,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
 var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
-var messageStyle = function messageStyle(props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
+var messageStyle = function messageStyle() {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
 };
 var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 var HelperMessage = exports.HelperMessage = function HelperMessage(_ref) {
@@ -28,8 +28,8 @@ var HelperMessage = exports.HelperMessage = function HelperMessage(_ref) {
 var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
   return (0, _react.jsx)("div", {
-    css: function css(theme) {
-      return [messageStyle(theme), errorColor];
+    css: function css() {
+      return [messageStyle(), errorColor];
     }
   }, (0, _react.jsx)("span", {
     css: iconWrapperStyle
@@ -42,8 +42,8 @@ var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
 var ValidMessage = exports.ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
   return (0, _react.jsx)("div", {
-    css: function css(theme) {
-      return [messageStyle(theme), validColor];
+    css: function css() {
+      return [messageStyle(), validColor];
     }
   }, (0, _react.jsx)("span", {
     css: iconWrapperStyle

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

@@ -18,18 +18,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDom = require("react-dom");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNextStableReactContext = _interopRequireDefault(require("@atlaskit/analytics-next-stable-react-context"));
-var _components = require("@atlaskit/theme/components");
 var _analytics = require("../../analytics");
 var _eventDispatcher = require("../../event-dispatcher");
 var _IntlProviderIfMissingWrapper = _interopRequireDefault(require("../IntlProviderIfMissingWrapper"));
-var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
 var _class4;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 var PortalProviderAPI = exports.PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   (0, _inherits2.default)(PortalProviderAPI, _EventDispatcher);
   var _super = _createSuper(PortalProviderAPI);
-  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext) {
     var _this;
     (0, _classCallCheck2.default)(this, PortalProviderAPI);
     _this = _super.call(this);
@@ -40,7 +38,6 @@ var PortalProviderAPI = exports.PortalProviderAPI = /*#__PURE__*/function (_Even
     _this.intl = intl;
     _this.onAnalyticsEvent = onAnalyticsEvent;
     _this.useAnalyticsContext = analyticsContext;
-    _this.themeMode = themeMode;
     return _this;
   }
   (0, _createClass2.default)(PortalProviderAPI, [{
@@ -53,10 +50,7 @@ var PortalProviderAPI = exports.PortalProviderAPI = /*#__PURE__*/function (_Even
         hasAnalyticsContext: hasAnalyticsContext,
         hasIntlContext: hasIntlContext
       });
-      var childrenWithThemeProviders = /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
-        mode: this.themeMode
-      }, children());
-      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, children()) : children();
       if (hasIntlContext) {
         wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
           value: this.intl
@@ -72,25 +66,20 @@ var PortalProviderAPI = exports.PortalProviderAPI = /*#__PURE__*/function (_Even
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
       var _this2 = this;
-      var intl = _ref.intl,
-        themeMode = _ref.themeMode;
+      var intl = _ref.intl;
       this.intl = intl;
-      this.themeMode = themeMode;
       this.portals.forEach(function (portal, container) {
         if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
         var wrappedChildren = portal.children();
-        var childrenWithThemeProviders = /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
-          mode: themeMode
-        }, wrappedChildren);
         if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
-          wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
+          wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, wrappedChildren);
         }
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
             value: _this2.intl
-          }, childrenWithThemeProviders);
+          }, wrappedChildren);
         }
         (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this2.context, wrappedChildren, container);
       });
@@ -138,7 +127,7 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
     var _this3;
     (0, _classCallCheck2.default)(this, BasePortalProvider);
     _this3 = _super2.call(this, props);
-    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
     return _this3;
   }
   (0, _createClass2.default)(BasePortalProvider, [{
@@ -150,8 +139,7 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.portalProviderAPI.forceUpdate({
-        intl: this.props.intl,
-        themeMode: this.props.themeMode
+        intl: this.props.intl
       });
     }
   }]);
@@ -174,10 +162,8 @@ var PortalProviderWithThemeAndIntlProviders = function PortalProviderWithThemeAn
     useAnalyticsContext = _ref3.useAnalyticsContext,
     render = _ref3.render;
   var intl = (0, _reactIntlNext.useIntl)();
-  var globalTheme = (0, _components.useGlobalTheme)();
   return /*#__PURE__*/_react.default.createElement(BasePortalProvider, {
     intl: intl,
-    themeMode: globalTheme.mode,
     onAnalyticsEvent: onAnalyticsEvent,
     useAnalyticsContext: useAnalyticsContext,
     render: render

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

@@ -13,8 +13,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _uiColor = require("../../ui-color");
@@ -31,11 +29,8 @@ var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_template
 // 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 */
-var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
-    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-  })(theme), _colors.N60A, _colors.N60A, "var(--ds-space-100, 8px)");
+var colorPickerWrapper = function colorPickerWrapper() {
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), _colors.N60A, _colors.N60A, "var(--ds-space-100, 8px)");
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -165,13 +160,10 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = function buttonStyle(theme) {
+  var buttonStyle = function buttonStyle() {
     var _props$size, _props$size2, _props$size3;
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", " 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-space-075, 6px)", "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _uiColor.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", (0, _components.themed)({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
-    })(theme));
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", " 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-space-075, 6px)", "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
+    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-border-radius, 3px)", currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"));
   };
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper

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

@@ -24,7 +24,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("../../styles");
 var _ToolbarArrowKeyNavigationProvider = require("../../ui-menu/ToolbarArrowKeyNavigationProvider");
@@ -45,28 +44,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
-  return function (theme) {
-    if (isActive) {
-      /**
-       * Hack for item to imitate old dropdown-menu selected styles
-       */
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        > span,\n        > span:hover,\n        > span:active {\n          background: ", ";\n          color: ", ";\n        }\n        :focus > span[aria-disabled='false'] {\n          ", ";\n        }\n        :focus-visible,\n        :focus-visible > span[aria-disabled='false'] {\n          outline: none;\n        }\n      "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
-    } else {
-      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        > span:hover[aria-disabled='false'] {\n          color: ", ";\n          background-color: ", ";\n        }\n        ", "\n        > span[aria-disabled='true'] {\n          color: ", ";\n        }\n        :focus > span[aria-disabled='false'] {\n          ", ";\n        }\n        :focus-visible,\n        :focus-visible > span[aria-disabled='false'] {\n          outline: none;\n        }\n      "])), (0, _components.themed)({
-        light: "var(--ds-text, ".concat(_colors.N900, ")"),
-        dark: "var(--ds-text, ".concat(_colors.DN600, ")")
-      })(theme), (0, _components.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 && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat((0, _components.themed)({
-        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
-        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
-      })(theme), ";\n          }"), (0, _components.themed)({
-        light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
-        dark: "var(--ds-text-disabled, ".concat(_colors.DN80, ")")
-      })(theme), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
-    }
-  };
+  if (isActive) {
+    /**
+     * Hack for item to imitate old dropdown-menu selected styles
+     */
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
+  } else {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      ", "\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(_colors.N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+  }
 };
 
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_DropList.default);
@@ -299,10 +284,8 @@ function DropdownMenuItem(_ref) {
     setSubmenuActive(!!event.target.closest(".".concat(_styles.DropdownMenuSharedCssClassName.SUBMENU)));
   };
   var dropListItem = (0, _react2.jsx)("div", {
-    css: function css(theme) {
-      return buttonStyles(item.isActive, submenuActive)({
-        theme: theme
-      });
+    css: function css() {
+      return buttonStyles(item.isActive, submenuActive);
     },
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',

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

@@ -1,3 +1,22 @@
+import { headingSizes } from '@atlaskit/theme/typography';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
-export const DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+export const DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+/**
+ * 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 const 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/es2019/media-inline/inline-image-wrapper.js

@@ -3,8 +3,10 @@
 import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 const wrapperStyle = css({
-  display: 'inline-block',
-  verticalAlign: 'text-bottom',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
   overflow: 'hidden',
   borderRadius: `${"var(--ds-border-radius, 3px)"}`,
   aspectRatio: `var(${INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_ASPECT_RATIO})`

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

@@ -4,8 +4,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';
@@ -95,8 +95,8 @@ export const 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, {

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

@@ -1,35 +1,50 @@
 import { css } from '@emotion/react';
-import { headingSizes } from '@atlaskit/theme/typography';
+import { referenceHeights } from './constants';
 export const INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 export const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
-const inlineImageHeight = height => css`
+const inlineImageHeight = (height, margin = 0) => css`
   > .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
     > .mediaInlineView-content-wrap
     > .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {
     height: ${height}px;
+    transform: translateY(${margin}px);
   }
 `;
+
+/**
+ * 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 const mediaInlineImageStyles = css`
-  // default inline image height is 24px, this includes
   // p, h3, and action items
   .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {
-    height: ${headingSizes.h600.lineHeight}px;
+    height: ${referenceHeights['p']}px;
+    transform: translateY(-2px);
   }
 
   h1 {
-    ${inlineImageHeight(headingSizes.h800.lineHeight)}
+    ${inlineImageHeight(referenceHeights['h1'], -3)}
   }
 
   h2 {
-    ${inlineImageHeight(headingSizes.h700.lineHeight)}
+    ${inlineImageHeight(referenceHeights['h2'], -3)}
+  }
+
+  h3 {
+    ${inlineImageHeight(referenceHeights['h3'], -2)}
   }
 
   h4 {
-    ${inlineImageHeight(headingSizes.h500.lineHeight)}
+    ${inlineImageHeight(referenceHeights['h4'], -2)}
+  }
+
+  h5 {
+    ${inlineImageHeight(referenceHeights['h5'], -2)}
   }
 
-  h5,
   h6 {
-    ${inlineImageHeight(headingSizes.h400.lineHeight)}
+    ${inlineImageHeight(referenceHeights['h6'], -2)}
   }
 `;

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

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

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.27.8";
+const packageVersion = "76.27.10";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { browser } from '../utils';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
 export const inlineNodeViewClassname = 'inlineNodeView';
 function createNodeView({
@@ -174,7 +175,12 @@ function getPortalChildren({
       ,
       getPos: nodeViewParams.getPos,
       node: currentNode
-    }, extraComponentProps)), jsx("span", {
+    }, extraComponentProps)), browser.android ? jsx("span", {
+      className: `zeroWidthSpaceContainer`,
+      contentEditable: "false"
+    }, jsx("span", {
+      className: `${inlineNodeViewClassname}AddZeroWidthSpace`
+    }), ZERO_WIDTH_SPACE) : jsx("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
     }));
   };

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

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