@atlaskit/editor-core 193.2.6 → 193.3.0

package/dist/es2019/ui/ChromeCollapsed/styles.js

@@ -2,28 +2,26 @@ import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N300, N50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-export const inputStyle = css`
-  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */
-  input& {
-    background-color: ${"var(--ds-background-input, white)"};
-    border: 1px solid ${`var(--ds-border-input, ${akEditorSubtleAccent})`};
-    border-radius: ${borderRadius()}px;
-    box-sizing: border-box;
-    height: 40px;
-    padding-left: ${"var(--ds-space-250, 20px)"};
-    padding-top: ${"var(--ds-space-150, 12px)"};
-    padding-bottom: ${"var(--ds-space-150, 12px)"};
-    font-size: ${relativeFontSizeToBase16(14)};
-    width: 100%;
-    font-weight: 400;
-    line-height: 1.42857142857143;
-    letter-spacing: -0.005em;
-    color: ${`var(--ds-text-subtlest, ${N300})`};
-
-    &:hover {
-      background-color: ${"var(--ds-background-input-hovered, white)"};
-      border-color: ${`var(--ds-border-input, ${N50})`};
-      cursor: text;
+export const inputStyle = css({
+  'input&': {
+    backgroundColor: "var(--ds-background-input, white)",
+    border: `1px solid ${`var(--ds-border-input, ${akEditorSubtleAccent})`}`,
+    borderRadius: `${borderRadius()}px`,
+    boxSizing: 'border-box',
+    height: '40px',
+    paddingLeft: "var(--ds-space-250, 20px)",
+    paddingTop: "var(--ds-space-150, 12px)",
+    paddingBottom: "var(--ds-space-150, 12px)",
+    fontSize: relativeFontSizeToBase16(14),
+    width: '100%',
+    fontWeight: 400,
+    lineHeight: 1.42857142857143,
+    letterSpacing: '-0.005em',
+    color: `var(--ds-text-subtlest, ${N300})`,
+    '&:hover': {
+      backgroundColor: "var(--ds-background-input-hovered, white)",
+      borderColor: `var(--ds-border-input, ${N50})`,
+      cursor: 'text'
     }
   }
-`;
+});

package/dist/es2019/ui/ContentStyles/date.js

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {
     .${DateSharedCssClassName.DATE_WRAPPER} {

package/dist/es2019/ui/ContentStyles/expand.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { expandClassNames } from '@atlaskit/editor-common/styles';
+import { BreakoutCssClassName, expandClassNames } from '@atlaskit/editor-common/styles';
 import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N100A, N40A, N50A, R300, R50 } from '@atlaskit/theme/colors';

package/dist/es2019/ui/ContentStyles/extension.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
 export const extensionStyles = css`
   .multiBodiedExtensionView-content-wrap {
     &.danger > span > .multiBodiedExtension--container {

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

@@ -6,9 +6,7 @@ import { telepointerStyle } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { annotationSharedStyles, blockMarksSharedStyles, codeBlockInListSafariFix, dateSharedStyle, embedCardStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, resizerStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
-import { MediaSharedClassNames } from '@atlaskit/editor-common/styles';
-import { codeMarkSharedStyles, linkSharedStyle, ruleSharedStyles } from '@atlaskit/editor-common/styles';
+import { annotationSharedStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, MediaSharedClassNames, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, SmartCardSharedCssClassName, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { browser } from '@atlaskit/editor-common/utils';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
@@ -27,6 +25,8 @@ import { mediaStyles } from './media';
 import { panelStyles } from './panel';
 import { statusStyles } from './status';
 import { taskDecisionStyles } from './tasks-and-decisions';
+
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css
 export const linkStyles = css`
   .ProseMirror {
     ${linkSharedStyle}
@@ -120,6 +120,8 @@ const emojiStyles = css`
     }
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-exported-css
 export const placeholderStyles = css({
   '.ProseMirror .placeholder-decoration': {
     color: `var(--ds-text-subtlest, ${N200})`,

package/dist/es2019/ui/ContentStyles/layout.js

@@ -5,6 +5,8 @@ import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/cons
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N80A, N90A } from '@atlaskit/theme/colors';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const layoutStyles = css`
   .ProseMirror {
     ${columnLayoutSharedStyle} [data-layout-section] {

package/dist/es2019/ui/ContentStyles/media.js

@@ -4,7 +4,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
 import { B200, N60, Y500 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},

package/dist/es2019/ui/ContentStyles/status.js

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export const statusStyles = css`
   .${TableSharedCssClassName.TABLE_CELL_WRAPPER},
     .${TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER},

package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to `getSelectionStyles`
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation due to `getSelectionStyles`
 export const taskDecisionStyles = css`
   [data-decision-wrapper] {
     cursor: pointer;

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

@@ -17,11 +17,11 @@ const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
 const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
 const FULLWIDTH_MODE = 'full-width';
 const WIDE_MODE = 'wide';
-const absolutePanelStyles = css`
-  position: absolute;
-  right: 0;
-  height: calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT});
-`;
+const absolutePanelStyles = css({
+  position: 'absolute',
+  right: 0,
+  height: `calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT})`
+});
 const checkTableExistsInDoc = editorView => {
   const tableNodeSchema = editorView.state.schema.nodes.table;
   let findResult = findChildrenByType(editorView.state.doc, tableNodeSchema);
@@ -48,24 +48,24 @@ export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth, edito
     return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
   }
 };
-const panelHidden = css`
-  width: 0;
-`;
-export const panel = css`
-  width: ${akEditorContextPanelWidth}px;
-  height: 100%;
-  transition: width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier};
-  overflow: hidden;
-  box-shadow: inset 2px 0 0 0 ${`var(--ds-border, ${N30})`};
-`;
-export const content = css`
-  transition: width 600ms ${akEditorSwoopCubicBezier};
-  box-sizing: border-box;
-  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px;
-  width: ${akEditorContextPanelWidth}px;
-  height: 100%;
-  overflow-y: auto;
-`;
+const panelHidden = css({
+  width: 0
+});
+export const panel = css({
+  width: `${akEditorContextPanelWidth}px`,
+  height: '100%',
+  transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
+  overflow: 'hidden',
+  boxShadow: `inset 2px 0 0 0 ${`var(--ds-border, ${N30})`}`
+});
+export const content = css({
+  transition: `width 600ms ${akEditorSwoopCubicBezier}`,
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`,
+  width: `${akEditorContextPanelWidth}px`,
+  height: '100%',
+  overflowY: 'auto'
+});
 export class SwappableContentArea extends React.PureComponent {
   constructor(...args) {
     super(...args);

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

@@ -6,9 +6,9 @@ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { MountPluginHooks } from './mount-plugin-hooks';
-const pluginsComponentsWrapper = css`
-  display: flex;
-`;
+const pluginsComponentsWrapper = css({
+  display: 'flex'
+});
 export default class PluginSlot extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/ui/Toolbar/ToolbarInner.js

@@ -2,13 +2,12 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-const toolbarComponentsWrapper = css`
-  display: flex;
-
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    justify-content: space-between;
+const toolbarComponentsWrapper = css({
+  display: 'flex',
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    justifyContent: 'space-between'
   }
-`;
+});
 export class ToolbarInner extends React.Component {
   shouldComponentUpdate(nextProps) {
     return nextProps.toolbarSize !== this.props.toolbarSize || nextProps.disabled !== this.props.disabled || nextProps.popupsMountPoint === this.props.popupsMountPoint || nextProps.popupsBoundariesElement === this.props.popupsBoundariesElement || nextProps.popupsScrollableElement === this.props.popupsScrollableElement || nextProps.isReducedSpacing !== this.props.isToolbarReducedSpacing;

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

@@ -43,9 +43,12 @@ export default class WithFlash extends React.Component {
       children
     } = this.props;
     this.toggle = animate && !this.toggle;
-    return jsx("div", {
-      css: animate ? flashWrapperAnimated : flashWrapper,
-      className: this.toggle ? '-flash' : ''
-    }, children);
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+      jsx("div", {
+        css: animate ? flashWrapperAnimated : flashWrapper,
+        className: this.toggle ? '-flash' : ''
+      }, children)
+    );
   }
 }

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "193.2.6";
+export const version = "193.3.0";

package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js

@@ -1,5 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 import { css } from '@emotion/react';
 import { inlineNodeViewClassname } from '@atlaskit/editor-common/react-node-view';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
@@ -7,4 +7,24 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(.zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n    // Prevent visually hidden assistive text from being selected.\n    & > .assistive {\n      user-select: none;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);
+export var InlineNodeViewSharedStyles = css((_css = {}, _defineProperty(_css, ".".concat(inlineNodeViewClassname), {
+  display: 'inline',
+  userSelect: 'all',
+  whiteSpace: 'nowrap',
+  '& > *:not(.zeroWidthSpaceContainer)': {
+    whiteSpace: 'pre-wrap'
+  },
+  '& > .assistive': {
+    userSelect: 'none'
+  }
+}), _defineProperty(_css, '&.ua-safari', _defineProperty({}, ".".concat(inlineNodeViewClassname), {
+  '::selection, *::selection': {
+    background: 'transparent'
+  }
+})), _defineProperty(_css, "&.ua-chrome .".concat(inlineNodeViewClassname, " > span"), {
+  userSelect: 'none'
+}), _defineProperty(_css, ".".concat(inlineNodeViewClassname, "AddZeroWidthSpace"), {
+  '::after': {
+    content: "'".concat(ZERO_WIDTH_SPACE, "'")
+  }
+}), _css));

package/dist/esm/presets/universal.js

@@ -147,7 +147,6 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     allowCustomPanelEdit: _typeof(props.allowPanel) === 'object' ? props.allowPanel.allowCustomPanelEdit : false
   }], Boolean(props.allowPanel)).maybeAdd(contextPanelPlugin, Boolean(isFullPage)).maybeAdd([extensionPlugin, {
     breakoutEnabled: appearance === 'full-page' && (_typeof(props.allowExtension) === 'object' ? props.allowExtension.allowBreakout : true) !== false,
-    allowAutoSave: _typeof(props.allowExtension) === 'object' ? props.allowExtension.allowAutoSave : false,
     extensionHandlers: props.extensionHandlers,
     useLongPressSelection: false,
     appearance: appearance

package/dist/esm/ui/Addon/ClickAreaMobile/index.js

@@ -5,8 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -22,7 +20,9 @@ import { clickAreaClickHandler } from '../click-area-helper';
 var clickWrapper = function clickWrapper(_ref) {
   var isExpanded = _ref.isExpanded,
     minHeight = _ref.minHeight;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+  return css({
+    height: '100%'
+  }, isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
 };
 /**
  * Click Area is responsible for improving UX by ensuring the user

package/dist/esm/ui/Addon/Dropdown/styles.js

@@ -1,6 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { N60A } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-export var dropdown = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  padding: ", " 0;\n"])), "var(--ds-surface-overlay, white)", borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
+export var dropdown = css({
+  display: 'flex',
+  flexDirection: 'column',
+  background: "var(--ds-surface-overlay, white)",
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"),
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-050, 4px)".concat(" 0")
+});

package/dist/esm/ui/Addon/DropdownItem/styles.js

@@ -1,5 +1,17 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { N20, N800 } from '@atlaskit/theme/colors';
-export var dropdownItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: ", " ", "\n    ", " ", ";\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-text, ".concat(N800, ")"), "var(--ds-space-100, 8px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));
+export var dropdownItem = css({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-400, 32px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-150, 12px)"),
+  color: "var(--ds-text, ".concat(N800, ")"),
+  '> span': {
+    display: 'flex',
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")")
+  }
+});

package/dist/esm/ui/Appearance/Chromeless.js

@@ -5,8 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -18,7 +16,26 @@ import { createEditorContentStyle } from '../ContentStyles';
 import PluginSlot from '../PluginSlot';
 import { scrollbarStyles } from '../styles';
 import WithFlash from '../WithFlash';
-var chromelessEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 20px;\n  height: auto;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n\n    & > :last-child {\n      padding-bottom: 0.5em;\n    }\n  }\n"])), scrollbarStyles);
+var chromelessEditor = css({
+  lineHeight: '20px',
+  height: 'auto',
+  overflowX: 'hidden',
+  overflowY: 'auto'
+}, scrollbarStyles, {
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0,
+    '& > :last-child': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      paddingBottom: '0.5em'
+    }
+  }
+});
 var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 var Editor = /*#__PURE__*/function (_React$Component) {
@@ -57,7 +74,11 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: [chromelessEditor, maxHeight && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                max-height: ", "px;\n              "])), maxHeight), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              min-height: ", "px;\n            "])), minHeight)],
+        css: [chromelessEditor, maxHeight && css({
+          maxHeight: "".concat(maxHeight, "px")
+        }), css({
+          minHeight: "".concat(minHeight, "px")
+        })],
         "data-testid": "chromeless-editor",
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -35,22 +35,28 @@ var StickyToolbar = function StickyToolbar(props) {
       setTop(props.offsetTop || 0);
     }
   }, [props.externalToolbarRef, props.offsetTop]);
-  return jsx("div", {
-    css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    ,
-    style: {
-      top: "".concat(top, "px")
-    },
-    "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline'
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    jsx("div", {
+      css: [mainToolbarWrapperStyle(props.twoLineEditorToolbar), stickyToolbarWrapperStyle]
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      ,
+      style: {
+        top: "".concat(top, "px")
+      },
+      "data-testid": "ak-editor-main-toolbar",
+      className: 'show-keyline'
+    }, props.children)
+  );
 };
 var FixedToolbar = function FixedToolbar(props) {
-  return jsx("div", {
-    css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
-    "data-testid": "ak-editor-main-toolbar"
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    jsx("div", {
+      css: mainToolbarWrapperStyle(props.twoLineEditorToolbar),
+      "data-testid": "ak-editor-main-toolbar"
+    }, props.children)
+  );
 };
 
 /**

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,27 +1,81 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
 import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
-var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0\n    ", ";\n"])), akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
-var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
-var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorFloatingDialogZIndex, toolbarLineHeight, "var(--ds-surface, white)", akEditorMobileMaxWidth, toolbarLineHeight);
+var mainToolbarWithKeyline = css({
+  boxShadow: "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+});
+var mainToolbarTwoLineStyle = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flexWrap: 'wrap',
+  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+}));
+var mainToolbar = css(_defineProperty({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  transition: "box-shadow 200ms ".concat(akEditorSwoopCubicBezier),
+  zIndex: akEditorFloatingDialogZIndex,
+  display: 'flex',
+  height: "".concat(toolbarLineHeight, "px"),
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, white)",
+  '& object': {
+    height: '0 !important'
+  }
+}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
+  display: 'grid',
+  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+}));
 export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 };
-export var mainToolbarIconBeforeStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", ";\n  height: ", ";\n  width: ", ";\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", akEditorMobileMaxWidth);
-var mainToolbarFirstChild = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), akEditorMobileMaxWidth);
-var mainToolbarFirstChildTowLine = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex: 1 1 100%;\n    height: ", "px;\n    justify-content: flex-end;\n    // ED-10241: We add fit-content to ensure that MainToolbar does not\n    // shrink more than the size of its contents. This will prevent the\n    // find/replace icon from being overlapped during a confluence\n    // publish operation\n    min-width: fit-content;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+export var mainToolbarIconBeforeStyle = css(_defineProperty({
+  margin: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-400, 32px)"
+}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+var mainToolbarFirstChild = css(_defineProperty({
+  display: 'flex',
+  flexGrow: 1
+}, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+var mainToolbarFirstChildTowLine = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flex: '1 1 100%',
+  height: "".concat(toolbarLineHeight, "px"),
+  justifyContent: 'flex-end',
+  minWidth: 'fit-content'
+}));
 export var mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
   return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
 };
-var mainToolbarSecondChild = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n"])));
-var mainToolbarSecondChildTwoLine = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    display: flex;\n    flex-grow: 1;\n    flex: 1 1 100%;\n    margin: auto;\n    height: ", "px;\n    min-width: 0;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+var mainToolbarSecondChild = css({
+  minWidth: 'fit-content'
+});
+var mainToolbarSecondChildTwoLine = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  display: 'flex',
+  flexGrow: 1,
+  flex: '1 1 100%',
+  margin: 'auto',
+  height: "".concat(toolbarLineHeight, "px"),
+  minWidth: 0
+}));
 export var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
   return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
 };
-export var nonCustomToolbarWrapperStyle = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
-export var customToolbarWrapperStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
+export var nonCustomToolbarWrapperStyle = css({
+  alignItems: 'center',
+  display: 'flex',
+  flexGrow: 1
+});
+export var customToolbarWrapperStyle = css({
+  alignItems: 'center',
+  display: 'flex'
+});

package/dist/esm/ui/AppearanceComponents/Mobile.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -14,7 +12,19 @@ import WithFlash from '../WithFlash';
 
 // Copied from packages/editor/editor-mobile-bridge/src/editor/editor-plugins/mobile-dimensions/types.ts
 
-var mobileEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 30px;\n  width: 100%;\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var mobileEditor = css({
+  minHeight: '30px',
+  width: '100%',
+  maxWidth: 'inherit',
+  boxSizing: 'border-box',
+  wordWrap: 'break-word',
+  'div > .ProseMirror': {
+    outline: 'none',
+    whiteSpace: 'pre-wrap',
+    padding: 0,
+    margin: 0
+  }
+});
 var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export var MobileAppearance = /*#__PURE__*/forwardRef(function MobileAppearance(_ref, ref) {