@atlaskit/editor-core 162.0.0 → 162.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 162.0.1
+
+### Patch Changes
+
+- [`cfcc23db294`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfcc23db294) - ED-14735 Rename table styles from '.css.ts' to '.
+
 ## 162.0.0
 
 ### Minor Changes

package/dist/cjs/labs/next/full-page.js

@@ -35,7 +35,7 @@ var _Addon = require("../../ui/Addon");
 
 var _styles = require("../../ui/styles");
 
-var _commonStyles = require("../../plugins/table/ui/common-styles.css");
+var _commonStyles = require("../../plugins/table/ui/common-styles");
 
 var _ui2 = _interopRequireDefault(require("../../plugins/collab-edit/ui"));
 

package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js

@@ -52,7 +52,7 @@ var _types2 = require("../../../analytics/types");
 
 var _analytics = require("../../../analytics");
 
-var _styles = require("./styles.css");
+var _styles = require("./styles");
 
 var _ErrorBoundary = require("../../../../ui/ErrorBoundary");
 

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/index.js

@@ -27,7 +27,7 @@ var _pluginKey = require("../../pm-plugins/plugin-key");
 
 var _consts = require("../consts");
 
-var _styles = require("./styles.css");
+var _styles = require("./styles");
 
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 

package/dist/cjs/plugins/table/ui/common-styles.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableStyles = exports.tableFullPageEditorStyles = exports.tableCommentEditorStyles = exports.deprecatedTableFullPageEditorStyles = exports.deprecatedTableCommentEditorStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styledComponents = require("styled-components");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _styles2 = require("../../../ui/styles");
+
+var _types = require("../types");
+
+var _consts = require("./consts");
+
+var _uiStyles = require("./ui-styles");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var cornerControlHeight = _consts.tableToolbarSize + 1;
+var rangeSelectionStyles = "\n.".concat(_types.TableCssClassName.NODEVIEW_WRAPPER, ".").concat(_editorSharedStyles.akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), "\n  }\n}\n");
+var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(_consts.columnControlsDecorationHeight, "px;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + _consts.tablePadding * 2 + 23, "px;\n  }\n  &.").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(_consts.columnControlsDecorationHeight, "px;\n    }\n  }\n}");
+
+var tableStyles = function tableStyles(props) {
+  var _props$featureFlags;
+
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button*/\n    ", "\n    /* Ends Delete button*/\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 1px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n"])), _types.TableCssClassName.LAYOUT_BUTTON, _colors.N20A, _colors.N300, _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, _colors.B300, (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(props), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, _colors.N40A, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, (0, _uiStyles.InsertMarker)(props, "\n          right: -1px;\n          top: -12px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableToolbarColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n        border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableToolbarColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, _colors.N0, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _colors.R500, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableInsertColumnButtonSize / 2, _consts.tableInsertColumnButtonSize / 2, _consts.tableScrollbarOffset, _consts.tableScrollbarOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR);
+};
+
+exports.tableStyles = tableStyles;
+var tableFullPageEditorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+exports.tableFullPageEditorStyles = tableFullPageEditorStyles;
+var deprecatedTableFullPageEditorStyles = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+exports.deprecatedTableFullPageEditorStyles = deprecatedTableFullPageEditorStyles;
+var tableCommentEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles); // TODO remove this after migrated off styled-component
+
+exports.tableCommentEditorStyles = tableCommentEditorStyles;
+var deprecatedTableCommentEditorStyles = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _styles2.scrollbarStyles);
+exports.deprecatedTableCommentEditorStyles = deprecatedTableCommentEditorStyles;

package/dist/cjs/plugins/table/ui/{ui-styles.css.js → ui-styles.js}

@@ -40,7 +40,7 @@ var InsertMarker = function InsertMarker(props, cssString) {
 exports.InsertMarker = InsertMarker;
 
 var Button = function Button(cssString) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), (0, _constants.borderRadius)(), _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s,\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), (0, _constants.borderRadius)(), _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
 };
 
 var HeaderButton = function HeaderButton(props, cssString) {
@@ -62,7 +62,7 @@ var HeaderButtonDanger = function HeaderButtonDanger() {
 exports.HeaderButtonDanger = HeaderButtonDanger;
 
 var InsertButton = function InsertButton() {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n  .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: white;\n      box-shadow: 0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A, ";\n      color: ").concat(_colors.N300, ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: white;\n      box-shadow: 0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A, ";\n      color: ").concat(_colors.N300, ";\n    ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
 };
 
 var InsertButtonHover = function InsertButtonHover() {
@@ -75,15 +75,15 @@ var insertRowButtonWrapper = (0, _react.css)(_templateObject11 || (_templateObje
 exports.insertRowButtonWrapper = insertRowButtonWrapper;
 
 var columnControlsLineMarker = function columnControlsLineMarker(props) {
-  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " table tr:first-child td,\n  .", ".", " table tr:first-child th {\n    position: relative;\n\n    &::before {\n      content: ' ';\n      ", ";\n      top: -", "px;\n      right: -", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, Marker(props), _consts.tableToolbarSize + _consts.lineMarkerOffsetFromColumnControls, _consts.lineMarkerSize / 2);
+  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", "\n    table\n    tr:first-child\n    td,\n  .", ".", "\n    table\n    tr:first-child\n    th {\n    position: relative;\n\n    &::before {\n      content: ' ';\n      ", ";\n      top: -", "px;\n      right: -", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, Marker(props), _consts.tableToolbarSize + _consts.lineMarkerOffsetFromColumnControls, _consts.lineMarkerSize / 2);
 };
 
 exports.columnControlsLineMarker = columnControlsLineMarker;
-var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n  .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_colors.N20A, ";\n        color: ").concat(_colors.N300, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _colors.R300);
+var DeleteButton = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: white;\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_colors.N20A, ";\n        color: ").concat(_colors.N300, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _colors.R300);
 exports.DeleteButton = DeleteButton;
 
 var OverflowShadow = function OverflowShadow(props) {
-  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n  .", "{\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(\n      to left,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ",\n    .", "{\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n  .", ".", " {\n    .", ",\n    .", " {\n      top: ", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom + _consts.tableToolbarSize - 2, _styles.tableMarginTop + _consts.tableToolbarSize - 1, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, _colors.N40A, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _colors.N40A, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom - 2, _styles.tableMarginTop - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableControlsSpacing);
+  return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(\n      100% - ", "px\n    );\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n  .", ".", " {\n    .", ", .", " {\n      top: ", "px;\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom + _consts.tableToolbarSize - 2, _styles.tableMarginTop + _consts.tableToolbarSize - 1, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, _colors.N40A, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _colors.N40A, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop + _styles.tableMarginBottom - 2, _styles.tableMarginTop - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableControlsSpacing);
 };
 
 exports.OverflowShadow = OverflowShadow;
@@ -95,15 +95,15 @@ var columnHeaderButton = function columnHeaderButton(props, cssString) {
 var columnHeaderButtonSelected = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), _colors.N0, _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor, _consts.columnControlsSelectedZIndex);
 
 var columnControlsDecoration = function columnControlsDecoration(props) {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table tr:first-child td.", ",\n  table tr:first-child th.", " {\n    &.", ",\n    &.", ",\n    &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", " .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", " table tr:first-child td.", ",\n  .", " table tr:first-child th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-child\n    td.", ",\n    table\n    tr:first-child\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-child\n    td.", ",\n    .", "\n    table\n    tr:first-child\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
 };
 
 exports.columnControlsDecoration = columnControlsDecoration;
-var hoveredDeleteButton = (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n    .", ",\n    .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor);
+var hoveredDeleteButton = (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor);
 exports.hoveredDeleteButton = hoveredDeleteButton;
-var hoveredCell = (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ") .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor);
+var hoveredCell = (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor);
 exports.hoveredCell = hoveredCell;
-var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ") .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, _colors.Y50, _colors.Y200);
+var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, _colors.Y50, _colors.Y200);
 exports.hoveredWarningCell = hoveredWarningCell;
-var resizeHandle = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", ",\n    th.", " {\n      .", "::after {\n        content: ' ';\n        right: ", "px;\n        position: absolute;\n        width: ", "px;\n        height: calc(100% + 1px);\n        background-color: ", ";\n        z-index: ", ";\n        top: 0;\n      }\n    }\n\n    table tr:first-child th.", " .", "::after,\n    table tr:first-child td.", " .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+var resizeHandle = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", ", th.", " {\n      .", "::after {\n        content: ' ';\n        right: ", "px;\n        position: absolute;\n        width: ", "px;\n        height: calc(100% + 1px);\n        background-color: ", ";\n        z-index: ", ";\n        top: 0;\n      }\n    }\n\n    table\n      tr:first-child\n      th.", "\n      .", "::after,\n      table\n      tr:first-child\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 exports.resizeHandle = resizeHandle;

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -49,7 +49,7 @@ var _pluginKey = require("../../../plugins/media/pm-plugins/plugin-key");
 
 var _Addon = require("../../Addon");
 
-var _commonStyles = require("../../../plugins/table/ui/common-styles.css");
+var _commonStyles = require("../../../plugins/table/ui/common-styles");
 
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -17,7 +17,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 
 var _ContentStyles = _interopRequireDefault(require("../../ContentStyles"));
 
-var _commonStyles = require("../../../plugins/table/ui/common-styles.css");
+var _commonStyles = require("../../../plugins/table/ui/common-styles");
 
 var _consts = require("../../../plugins/table/ui/consts");
 

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

@@ -29,7 +29,7 @@ var _styles3 = require("../../plugins/collab-edit/styles");
 
 var _styles4 = require("../../plugins/selection/gap-cursor/styles");
 
-var _commonStyles = require("../../plugins/table/ui/common-styles.css");
+var _commonStyles = require("../../plugins/table/ui/common-styles");
 
 var _styles5 = require("../../plugins/placeholder/styles");
 

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "162.0.0";
+var version = "162.0.1";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "162.0.0",
+	"version": "162.0.1",
 	"sideEffects": false
 }

package/dist/es2019/labs/next/full-page.js

@@ -10,7 +10,7 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';

package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js

@@ -13,7 +13,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
 import { CONTENT_COMPONENT } from '../../../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
-import { tableFloatingCellButtonStyles } from './styles.css';
+import { tableFloatingCellButtonStyles } from './styles';
 import { ErrorBoundary } from '../../../../ui/ErrorBoundary';
 const ButtonWrapper = styled.div`
   ${tableFloatingCellButtonStyles}

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -7,7 +7,7 @@ import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styl
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { pluginKey } from '../../pm-plugins/plugin-key';
 import { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
-import { tablePopupStyles } from './styles.css';
+import { tablePopupStyles } from './styles';
 import ContextualMenu from './ContextualMenu';
 const MenuWrapper = styled.div`
   ${tablePopupStyles}

package/dist/es2019/plugins/table/ui/{common-styles.css.js → common-styles.js}

@@ -7,7 +7,7 @@ import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableN
 import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
-import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles.css';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -187,7 +187,7 @@ export const tableStyles = props => {
       border-right-width: 1px;
     }
 
-     /* add left edge for first cell */
+    /* add left edge for first cell */
     .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
       margin-left: 0px;
     }
@@ -506,7 +506,12 @@ export const tableStyles = props => {
        * cell when center/right aligned.
        */
       th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
+        > h1:first-child,
+        > h2:first-child,
+        > h3:first-child,
+        > h4:first-child,
+        > h5:first-child,
+        > h6:first-child {
           margin-top: 0;
         }
       }

package/dist/es2019/plugins/table/ui/{ui-styles.css.js → ui-styles.js}

@@ -41,7 +41,8 @@ const Button = cssString => css`
   margin: 0px;
   padding: 0px;
   text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
+  transition: background 0.1s ease-out 0s,
+    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
   outline: none !important;
   cursor: none;
 
@@ -108,7 +109,7 @@ const InsertButton = () => css`
     bottom: 0;
   }
   .${ClassName.CONTROLS_INSERT_BUTTON_INNER},
-  .${ClassName.CONTROLS_INSERT_BUTTON} {
+    .${ClassName.CONTROLS_INSERT_BUTTON} {
     height: ${tableInsertColumnButtonSize}px;
     width: ${tableInsertColumnButtonSize}px;
   }
@@ -153,8 +154,14 @@ export const insertRowButtonWrapper = css`
   `)}
 `;
 export const columnControlsLineMarker = props => css`
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child td,
-  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS} table tr:first-child th {
+  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
+    table
+    tr:first-child
+    td,
+  .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
+    table
+    tr:first-child
+    th {
     position: relative;
 
     &::before {
@@ -167,7 +174,7 @@ export const columnControlsLineMarker = props => css`
 `;
 export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP},
-  .${ClassName.CONTROLS_DELETE_BUTTON} {
+    .${ClassName.CONTROLS_DELETE_BUTTON} {
     height: ${tableDeleteButtonSize}px;
     width: ${tableDeleteButtonSize}px;
   }
@@ -187,10 +194,11 @@ export const DeleteButton = css`
   }
 `;
 export const OverflowShadow = props => css`
-  .${ClassName.TABLE_RIGHT_SHADOW},
-  .${ClassName.TABLE_LEFT_SHADOW}{
+  .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px);
+    height: calc(
+      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
+    );
     position: absolute;
     pointer-events: none;
     top: ${tableMarginTop + tableToolbarSize - 1}px;
@@ -198,11 +206,7 @@ export const OverflowShadow = props => css`
     width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(
-      to left,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
     left: 0px;
   }
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
@@ -217,8 +221,7 @@ export const OverflowShadow = props => css`
     left: calc(100% + 2px);
   }
   .${ClassName.WITH_CONTROLS} {
-    .${ClassName.TABLE_RIGHT_SHADOW},
-    .${ClassName.TABLE_LEFT_SHADOW}{
+    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
       top: ${tableMarginTop - 1}px;
     }
@@ -227,8 +230,7 @@ export const OverflowShadow = props => css`
     }
   }
   .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-    .${ClassName.TABLE_RIGHT_SHADOW},
-    .${ClassName.TABLE_LEFT_SHADOW} {
+    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       top: ${tableControlsSpacing}px;
     }
   }
@@ -284,16 +286,21 @@ export const columnControlsDecoration = props => css`
     display: block;
   }
 
-  table tr:first-child td.${ClassName.TABLE_CELL},
-  table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     &.${ClassName.COLUMN_SELECTED},
-    &.${ClassName.HOVERED_COLUMN},
-    &.${ClassName.HOVERED_TABLE} {
+      &.${ClassName.HOVERED_COLUMN},
+      &.${ClassName.HOVERED_TABLE} {
       .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         ${columnHeaderButtonSelected};
       }
 
-      &.${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+      &.${ClassName.HOVERED_CELL_IN_DANGER}
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
         background-color: ${tableToolbarDeleteColor};
         border: 1px solid ${tableBorderDeleteColor};
         border-bottom: none;
@@ -302,8 +309,14 @@ export const columnControlsDecoration = props => css`
     }
   }
 
-  .${ClassName.TABLE_SELECTED} table tr:first-child td.${ClassName.TABLE_CELL},
-  .${ClassName.TABLE_SELECTED} table tr:first-child th.${ClassName.TABLE_HEADER_CELL} {
+  .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    td.${ClassName.TABLE_CELL},
+    .${ClassName.TABLE_SELECTED}
+    table
+    tr:first-child
+    th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
       ${columnHeaderButtonSelected};
     }
@@ -312,8 +325,8 @@ export const columnControlsDecoration = props => css`
 export const hoveredDeleteButton = css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
     .${ClassName.SELECTED_CELL},
-    .${ClassName.COLUMN_SELECTED},
-    .${ClassName.HOVERED_CELL} {
+      .${ClassName.COLUMN_SELECTED},
+      .${ClassName.HOVERED_CELL} {
       border: 1px solid ${tableBorderDeleteColor};
     }
     .${ClassName.SELECTED_CELL}::after {
@@ -322,7 +335,8 @@ export const hoveredDeleteButton = css`
   }
 `;
 export const hoveredCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     .${ClassName.HOVERED_CELL} {
       position: relative;
       border: 1px solid ${tableBorderSelectedColor};
@@ -330,7 +344,8 @@ export const hoveredCell = css`
   }
 `;
 export const hoveredWarningCell = css`
-  :not(.${ClassName.IS_RESIZING}) .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     td.${ClassName.HOVERED_CELL_WARNING} {
       background-color: ${Y50} !important; // We need to override the background-color added to the cell
       border: 1px solid ${Y200};
@@ -350,8 +365,7 @@ export const resizeHandle = css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    td.${ClassName.WITH_RESIZE_LINE},
-    th.${ClassName.WITH_RESIZE_LINE} {
+    td.${ClassName.WITH_RESIZE_LINE}, th.${ClassName.WITH_RESIZE_LINE} {
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
         content: ' ';
         right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
@@ -364,8 +378,14 @@ export const resizeHandle = css`
       }
     }
 
-    table tr:first-child th.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after,
-    table tr:first-child td.${ClassName.WITH_RESIZE_LINE} .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+    table
+      tr:first-child
+      th.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after,
+      table
+      tr:first-child
+      td.${ClassName.WITH_RESIZE_LINE}
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
       top: -${tableToolbarSize + tableCellBorderWidth}px;
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
     }

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -12,7 +12,7 @@ import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
 import ContentStyles from '../../ContentStyles';
-import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;

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

@@ -9,7 +9,7 @@ import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
-import { tableStyles } from '../../plugins/table/ui/common-styles.css';
+import { tableStyles } from '../../plugins/table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
 import { codeBlockStyles, highlightingCodeBlockStyles } from '../../plugins/code-block/styles';

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "162.0.0";
+export const version = "162.0.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "162.0.0",
+	"version": "162.0.1",
 	"sideEffects": false
 }

package/dist/esm/labs/next/full-page.js

@@ -15,7 +15,7 @@ import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';
 import { ClickAreaBlock } from '../../ui/Addon';
 import { scrollbarStyles } from '../../ui/styles';
-import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../plugins/table/ui/common-styles';
 import AvatarsWithPluginState from '../../plugins/collab-edit/ui';
 import { Editor, EditorContent, useEditorSharedConfig } from './Editor';
 import { Toolbar } from './Toolbar';